Zaokrąglanie liczb w JS: funkcje matematyczne round, floor, ceil i trunc

Spis treści:

• Unikalne cechy liczb w JavaScript
• Zrozumienie obiektu Math w JavaScript
• Funkcja Math.floor(): Zasada zaokrąglania w dół
• Funkcja Math.ceil(): Jak wykonywane jest zaokrąglanie w górę
• Metoda Math.round(): Zaokrąglanie zgodnie ze standardami matematycznymi
• Math.trunc() — Usuwanie części dziesiętnej liczby
• Typy argumentów zaokrąglania Funkcje
• Metody zaokrąglania liczb do określonej liczby miejsc po przecinku
• Ilustracje zastosowania metod zaokrąglania w różnych problemach
• Typowe niedociągnięcia w procesie zaokrąglania

Zaokrąglanie liczb to jedna z podstawowych operacji w programowaniu. Na pierwszy rzut oka zadanie to może wydawać się proste. W praktyce jednak często pojawiają się różne pytania: jakiej metody użyć, jak obsługiwać wartości ujemne i jak uniknąć błędów zaokrąglania do określonej liczby miejsc po przecinku.

Spis treści

• Liczby w JavaScript mają szereg unikalnych cech. Po pierwsze, język programowania wykorzystuje standard IEEE 754 do reprezentacji liczb zmiennoprzecinkowych podwójnej precyzji, co pozwala na pracę z liczbami z zakresu od około 5,0E-324 do 1,7976931348623157E+308. Zapewnia to znaczną dokładność, ale warto zauważyć, że nie wszystkie ułamki dziesiętne można przedstawić dokładnie, co może prowadzić do nieoczekiwanych wyników obliczeń.

  Co więcej, JavaScript nie obsługuje różnych typów liczbowych, w przeciwieństwie do wielu innych języków. Wszystkie liczby, w tym liczby całkowite i ułamki, są traktowane jako liczby zmiennoprzecinkowe. Oznacza to, że chociaż można używać liczb całkowitych, będą one przechowywane w tym samym formacie co liczby ułamkowe.

  Programiści powinni również zachować ostrożność w kwestiach zaokrąglania i precyzji. Na przykład operacje na liczbach mogą wprowadzać błędy zaokrąglania. Dlatego zaleca się korzystanie z metod precyzyjnych obliczeń, takich jak Math.round(), Math.ceil() lub Math.floor(), aby uniknąć niepożądanych sytuacji.

  JavaScript umożliwia pracę z dużymi liczbami za pomocą typu BigInt, który pozwala na przechowywanie liczb całkowitych o dowolnej długości. Jest to szczególnie przydatne w przypadku zadań wymagających dużych obliczeń lub podczas pracy z kryptografią.

  Podsumowując, zrozumienie natury liczb w JavaScript jest ważnym aspektem dla programistów, ponieważ pomoże uniknąć typowych błędów i zapewni dokładniejsze obliczenia w aplikacjach.

• Obiekt Math w JavaScript to wbudowany obiekt, który udostępnia różnorodne funkcje matematyczne i stałe. Nie wymaga on tworzenia instancji; zamiast tego funkcje i właściwości są dostępne bezpośrednio z poziomu samego obiektu. Math udostępnia narzędzia, takie jak metody wykonywania działań arytmetycznych, obliczania wartości trygonometrycznych i stałych, takich jak pi. Ten obiekt upraszcza złożone obliczenia matematyczne, czyniąc je bardziej przystępnymi dla programistów.
• Math.floor() to funkcja zaokrąglająca liczbę w dół.
• Math.ceil() to funkcja przeznaczona do zaokrąglania liczby w górę do najbliższej liczby całkowitej.
• Math.round() to funkcja zaokrąglająca liczby zgodnie z ogólnie przyjętymi zasadami matematycznymi.
• Math.trunc() to funkcja przeznaczona do usuwania części dziesiętnej liczby.
• Funkcje zaokrąglania mogą używać różnych typów argumentów. Zazwyczaj są to wartości liczbowe, które należy zaokrąglić do określonej liczby miejsc po przecinku. Ponadto argumenty mogą być odwołaniami do komórek zawierających dane liczbowe. Dopuszczalne jest również używanie wyrażeń zwracających wyniki liczbowe, co pozwala na dynamiczne obliczenie wartości do zaokrąglenia. W niektórych przypadkach funkcje mogą akceptować dodatkowe parametry, które określają zasady zaokrąglania, takie jak kierunek zaokrąglania (w górę lub w dół).
• Aby zaokrąglić liczbę do określonej liczby miejsc po przecinku, wykonaj następujące proste kroki. Najpierw określ dokładnie, ile miejsc po przecinku chcesz zachować. Następnie spójrz na cyfrę bezpośrednio po ostatniej cyfrze, którą chcesz zachować. Jeśli jest to cyfra 5 lub większa, dodaj 1 do ostatniej cyfry, którą chcesz zachować. W przeciwnym razie pozostaw ostatnią cyfrę bez zmian. Następnie usuń wszystkie cyfry po prawej stronie żądanej liczby. W ten sposób otrzymasz zaokrągloną wartość.
• Problemy związane z technikami zaokrąglania mogą być zróżnicowane i występować w różnych dziedzinach. Na przykład w sektorze finansowym zaokrąglanie jest często wymagane przy obliczaniu podatków lub stóp procentowych, aby uprościć przetwarzanie danych i uniknąć ułamków złożonych.

  W matematyce zaokrąglanie można stosować podczas wykonywania obliczeń, aby ułatwić zadania wymagające szybkich rozwiązań, na przykład przy ocenie wyników lub zaokrąglaniu długich liczb.

  W statystyce, gdy dane muszą być przedstawione w bardziej wizualnej formie, wyniki ankiet lub pomiarów są często zaokrąglane, aby uczynić informacje bardziej przystępnymi i łatwiejszymi do zrozumienia.

  Ponadto w inżynierii zaokrąglanie może być przydatne w projektowaniu, gdzie precyzyjne wymiary części można dostosować dla wygody i łatwości produkcji.

  W środowiskach edukacyjnych, takich jak lekcje matematyki, również szeroko wykorzystuje się problemy z zaokrąglaniem, aby pomóc uczniom rozwijać umiejętności liczbowe.

  Dlatego techniki zaokrąglania znajdują zastosowanie w wielu dziedzinach, od finansów po edukację, pomagając uprościć i usprawnić procesy przetwarzania danych.

• Typowe błędy w zaokrąglaniu

W JavaScript zaokrąglanie liczb odbywa się za pomocą obiektu Math, który zawiera metody takie jak Math.floor, Math.ceil, Math.round i Math.trunc.

Poza wymienionymi, obiekt Math oferuje również wiele innych przydatnych funkcji, które są często używane w połączeniu z zaokrąglaniem. Na przykład Math.abs(x) oblicza wartość bezwzględną liczby, Math.random() generuje liczbę losową z zakresu od 0 do 1, Math.pow(x, y) podnosi x do potęgi y, a Math.sqrt(x) zwraca pierwiastek kwadratowy liczby. Więcej informacji na temat tych i innych metod można znaleźć w dokumentacji.

W tym artykule przyjrzymy się działaniu zaokrąglania w JavaScript, omówimy jego niuanse i podzielimy się praktycznymi zaleceniami dotyczącymi wykorzystania tej wiedzy.

Najpierw omówmy, jak działają liczby w JavaScript.

Unikalne cechy liczb w JavaScript

JavaScript rozróżnia dwa główne typy liczb. Główne z nich to standardowe liczby całkowite i ułamki. Są one w stanie reprezentować zakres od około minus 9 biliardów do plus 9 biliardów, a dokładniej od −(2⁵³ − 1) do 2⁵³ − 1. Liczby te są klasyfikowane jako typ liczbowy.

JavaScript używa standardu znanego jako „liczby zmiennoprzecinkowe podwójnej precyzji” do przechowywania liczb. Istotą tego podejścia jest to, że liczby są reprezentowane w systemie binarnym. Problem występuje nie w przypadku liczb całkowitych, ale w przypadku niektórych ułamków dziesiętnych, których nie da się precyzyjnie zakodować w systemie binarnym. Jest to podobne do sytuacji w systemie dziesiętnym, gdzie 1/3 nie da się wyrazić precyzyjnie i staje się 0,333…

W związku z tym podczas operacji można czasami zaobserwować nietypowe sytuacje:

Nie jest to błąd wrodzony JavaScript — liczby są przechowywane w podobny sposób w każdym języku programowania korzystającym z tego formatu. Aby zminimalizować prawdopodobieństwo wystąpienia błędów, należy zaokrąglić wynik:

Najpierw pomnóż sumę przez 100, aby usunąć przecinek dziesiętny, a następnie zaokrąglij i podziel wynikową wartość z powrotem.

Drugi typ liczb jest dość rzadki — są to bardzo duże lub bardzo małe wartości, które wykraczają poza standardowy zakres liczb (przekraczające 2⁵³ − 1 lub mniejsze niż −(2⁵³ − 1)). Ten format jest oznaczony jako BigInt. Takie liczby nie dopuszczają wartości ułamkowych; mogą to być jedynie liczby całkowite. Reprezentacja takich liczb wygląda następująco:

Należy pamiętać, że litera n na końcu liczby jest sygnałem dla JavaScript, że ta wartość należy do typu BigInt.

W praktyce BigInt jest rzadko używany i jego rola ogranicza się głównie do kryptografii. W tym artykule nie będziemy jednak szczegółowo omawiać tego tematu, a skupimy się na kwestiach zaokrąglania.

Zrozumienie obiektu Math w JavaScript

Math to wbudowany obiekt, który ułatwia manipulowanie liczbami. Może on wykonywać operacje zaokrąglania, obliczać pierwiastki, generować liczby losowe i wykonywać wiele innych funkcji.

W przeciwieństwie do wielu innych obiektów w JavaScript, Math nie jest przeznaczony do używania jako funkcja ani do tworzenia instancji. Na przykład próba wywołania new Math() spowoduje błąd.

Interakcja z obiektem Math odbywa się wyłącznie za pośrednictwem jego metod i właściwości, które są predefiniowanymi poleceniami. Oto przykład implementacji:

W tym artykule skupimy się wyłącznie na możliwościach funkcji Math w zakresie zaokrąglania liczb.

Funkcja Math.floor(): zasada zaokrąglania w dół

Funkcja Math.floor() zaokrągla liczbę w dół do najbliższej liczby całkowitej mniejszej lub równej wartości początkowej. Po prostu ignoruje część ułamkową bez dodawania jednego, nawet jeśli liczba jest bardzo bliska następnej liczbie całkowitej.

Nawet jeśli liczba jest ujemna, Math.floor() zaokrągli ją w dół, co oznacza, że ​​jest ona bliższa następnej niższej wartości.

To podejście służy do określania liczby stron lub fragmentów w przypadkach, gdy nie można uwzględnić wartości ułamkowych.

Jeśli masz 23 komentarze, a jedna strona może pomieścić 5, musisz podzielić całkowitą liczbę komentarzy przez liczbę, która mieści się na stronie. Zatem 23 podzielone przez 5 równa się 4 z resztą. Oznacza to, że będziesz mógł wyświetlić 4 pełne strony, a pozostałe komentarze zajmą część piątej strony.

Wynikiem są 4 strony. Gdybyśmy przeszli do piątej strony, pozostałyby tylko 3 komentarze. W takim przypadku metoda Math.floor() zwróci liczbę całkowicie zapełnionych stron.

Funkcja Math.ceil(): Jak działa zaokrąglanie

Zaokrągla swój argument w górę do najbliższej liczby całkowitej.

Liczby ujemne również są zaokrąglane, w takim przypadku proces jest przeprowadzany w kierunku zera, co powoduje wzrost ich wartości.

Jeśli masz 103 posty i planujesz wyświetlić 20 postów na każdej stronie, to aby obliczyć liczbę wymaganych stron, musisz podzielić całkowitą liczbę postów przez liczbę postów, które mieszczą się na jednej stronie.

Podzielenie 103 przez 20 daje 5 pełnych stron z resztą. Ponieważ pozostałe rekordy również wymagają osobnej strony, należy dodać kolejną stronę, aby je wyświetlić. W związku z tym, aby pomieścić wszystkie rekordy, potrzebnych będzie 6 stron.

Aby zmieścić 103 rekordy, potrzebnych będzie 6 stron.

Metoda Math.round(): zaokrąglanie zgodnie ze standardami matematycznymi

Funkcja Math.round() zaokrągla liczbę zgodnie z ogólnie przyjętymi zasadami znanymi ze szkoły.

• Jeśli część ułamkowa liczby jest mniejsza niż 0,5, zaokrąglanie jest wykonywane w dół.
• Jeśli wartość jest równa lub większa niż 0,5, jest zaokrąglana w górę do najbliższej liczby całkowitej.

W przypadku liczb dodatnich wynik zaokrąglania jest zawsze przewidywalny. Jednak w przypadku wartości ujemnych funkcja Math.round() zachowuje się inaczej: zaokrągla w kierunku zera, jeśli część ułamkowa wynosi 0,5.

Jeśli film ma 95 sekund, aby przeliczyć tę wartość na minuty, należy podzielić liczbę sekund przez 60. Wynik to 1 minuta i 35 sekund.

Ostateczny czas to 2 minuty. W tym przypadku metoda zaokrąglania spowodowała zaokrąglenie liczby 1,58 do najbliższej liczby całkowitej. Gdyby film miał 89 sekund, odpowiadałoby to jednej minucie.

Math.trunc() — usuwanie części dziesiętnej liczby

Funkcja Math.trunc() nie zaokrągla liczb; po prostu obcina wszystkie cyfry po przecinku. Przechowuje tylko część całkowitą, niezależnie od tego, czy jest ona dodatnia, czy ujemna.

Gdy użytkownik rysuje prostokąt za pomocą myszy, otrzymane współrzędne mogą być ułamkowe. Jednak aby poprawnie wyświetlić prostokąt, wartości te muszą zostać przekonwertowane na liczby całkowite.

W naszym programie używamy funkcji Math.trunc(), ponieważ chcemy, aby współrzędne zostały zaokrąglone tylko w dół.

Załóżmy, że program obliczył zniżkę w wysokości -12,95. W tym przypadku chcemy zachować tylko całą liczbę do śledzenia audytu, z wyłączeniem miejsc dziesiętnych.

W ten sposób usuwamy część dziesiętną bez zaokrąglania, zachowując w ten sposób wartość całkowitą.

Typy argumentów funkcji zaokrąglających

Funkcje Math.round(), Math.floor(), Math.ceil() i Math.trunc() są przeznaczone do pracy z danymi liczbowymi. JavaScript jest jednak elastyczny: jeśli przekażesz do tych funkcji wartość niebędącą liczbą, celowo lub przez pomyłkę, silnik spróbuje przekonwertować ją na liczbę. Wynik tej konwersji może być różny — czasami się udaje, a czasami nie. Jeśli Math nie przekonwertuje przekazanej wartości na liczbę, wynikiem będzie NaN.

NaN, skrót od Not-a-Number (nie-liczba), to unikatowa wartość w JavaScript oznaczająca „nie jest liczbą”. Ta wartość występuje, gdy działanie matematyczne na liczbach nie daje prawidłowego wyniku, na przykład:

Przeanalizujmy, jak działają różne typy wartości.

Gdy ciąg zawiera tekst, wynikowa wartość będzie równa NaN. JavaScript najpierw konwertuje ciąg zawierający liczbę do formatu liczbowego, a następnie wykonuje zaokrąglanie.

Wartości logiczne prawda i fałsz są konwertowane na ich odpowiedniki liczbowe, odpowiednio 1 i 0.

W JavaScript wartość null jest interpretowana jako stan „pusty” lub „niedostępny”. Tę wartość można ręcznie ustawić dla zmiennej, która obecnie nie zawiera żadnych danych.

W celu zaokrąglenia rozsądnie jest interpretować wartość null jako 0.

Termin „niezdefiniowany” oznacza, że ​​zmienna istnieje, ale nie zawiera żadnych danych. Ta wartość jest automatycznie przypisywana, gdy deklarujesz zmienną, ale jej nie inicjujesz.

W tym przypadku zmienna value jest obecna, ale nie można jej zaokrąglić, co skutkuje wartością NaN.

Jeśli spróbujesz zaokrąglić wartość NaN, wynik pozostaje NaN.

Możliwe jest nawet zaokrąglenie tablicy w JavaScript. Może się to wydawać nietypowe, ale w niektórych przypadkach może być przydatne.

Przeanalizujmy trzy przypadki:

Tablica [5.3] jest najpierw konwertowana do liczby 5,3. Następnie, za pomocą funkcji Math.ceil(), ta wartość jest zaokrąglana w górę, co daje liczbę 6.

Pusta tablica [] jest konwertowana do zera. Zatem wynikiem zaokrąglenia jest zero.

Ostatnia tablica ma dwa elementy: [1, 5]. JavaScript ma problem z określeniem, która liczba była zamierzona, co skutkuje wartością NaN.

Podczas przetwarzania danych dostarczonych przez użytkownika należy je przekonwertować na liczbę przed zaokrągleniem.

Zapobiegnie to nieoczekiwanemu zachowaniu. Wartość NaN jest niebezpieczna, ponieważ może rozprzestrzeniać się w sekwencji obliczeń:

Metody zaokrąglania liczb do określonej liczby miejsc po przecinku

Metody klasy Math nie zapewniają bezpośredniego sposobu zaokrąglania liczb do określonej liczby miejsc po przecinku. Jeśli chcesz zaokrąglić liczbę, na przykład do dwóch miejsc po przecinku, istnieje kilka podejść, w tym zastosowanie różnych metod alternatywnych.

Aby zaokrąglić liczbę do n miejsc po przecinku, wykonaj następujące kroki:

• mnóż ją przez 10 do potęgi n – pozwoli nam to przesunąć przecinek.
• zastosuj zaokrąglanie;
• Zwróć wynik i podziel go przez 10 do potęgi n.

Na przykład zaokrąglimy wartość 1,23789 do dwóch miejsc po przecinku.

Metoda toFixed() pozwala zaokrąglić liczbę do określonej liczby miejsc po przecinku. Stosuje standardowe reguły matematyczne: jeśli następna cyfra jest równa lub większa od 5, zaokrąglanie następuje w górę. Warto jednak zauważyć, że wynik tej metody jest ciągiem znaków, a nie wartością liczbową.

Zaokrąglenie do dwóch miejsc po przecinku daje wartość «5,68».

Jeśli wprowadzisz zero lub brak danych, wartość zostanie zaokrąglona do najbliższej liczby całkowitej.

Aby zwrócić ciąg znaków do formatu liczbowego, możesz użyć funkcji parseFloat():

Ilustracje zastosowania metod zaokrąglania w różnych problemach

Metody Math.round, Math.floor, Math.ceil i Math.trunc są szeroko stosowane w różnych problemach.

Wyobraź sobie, że dodałeś do koszyka produkt o wartości 349 999 rubli. Produkt ten jest objęty rabatem w wysokości 12,75 rubla, ale sklep zaokrągla rabat w dół, aby uniknąć nadpłaty. Po zastosowaniu rabatu, suma zostanie również zaokrąglona w górę do najbliższej pełnej rubla.

Kroki:

• Zastosuj zaokrąglenie rabatu w dół za pomocą funkcji Math.floor.
• Usuń rabat z sumy.
• Zaokrąglij sumę do najbliższej liczby całkowitej za pomocą funkcji Math.round.

Wyobraź sobie, że planujesz zaprojektować układ siatki z trzema kolumnami i masz następujące wymagania:

• Kontener całkowicie pomieścił kolumny.
• Główny element został idealnie umieszczony poziomo.

Określanie szerokości kolumny:

Wyjaśnienie:

• Określanie szerokości jednej z kolumn:

799,8 / 3 = 266,6.

• Zmniejszamy wartości, aby upewnić się, że wszystkie trzy kolumny w całości mieszczą się w kontener:

Zaokrąglenie 266,6 do najbliższej liczby całkowitej daje 266.

• Sprawdźmy odpowiedź:

266 pomnożone przez 3 równa się 798 (wszystko się zgadza).

Pozostaje 1,8 piksela, które można wykorzystać jako odstępy między kolumnami.

Istnieje kontener nadrzędny o szerokości 800 pikseli i zagnieżdżony w nim element o szerokości 375 pikseli. Musimy określić poziomą pozycję środkową tego zagnieżdżonego elementu w jego bloku nadrzędnym.

Rozwiązanie:

Wyjaśnienie:

• Określmy lewy margines elementu środkowego względem kontenera nadrzędnego.

(800 - 375) podzielone przez 2 równa się 212,5.

• Aby uniknąć „rozmytych” krawędzi lub przesunięć, musimy zaokrąglić wynikową wartość do najbliższego pełnego piksela.

Zaokrąglenie 212,5 równa się 213 pikselom.

Jeśli chcesz płynnie przesunąć element, taki jak okrąg, z lewej do prawej, pamiętaj, że współrzędna x jest aktualizowana w każdej klatce i może przyjmować wartości ułamkowe. Jednak właściwość CSS left wymaga liczb całkowitych w pikselach. Użycie wartości ułamkowych może spowodować niewyraźne wyświetlanie elementu w przeglądarce lub nawet wywołać efekt drżenia.

Rozwiązanie:

Wyjaśnienie:

• x = 123,78 — wartość ta jest ustalana w sposób zmienny, w zależności od czynników takich jak czas lub szybkość.
• Zaokrąglenie do najbliższej liczby całkowitej: Math.round(x) daje wynik 124.
• CSS wymaga precyzyjnych współrzędnych, więc element.style.left = ‘124px’ jest używany.

Używanie ułamkowych wartości współrzędnych (na przykład 123,78 px) może spowodować niewyraźne wyświetlanie elementu lub nawet wywołać efekt drżenia podczas przesuwania.

Typowe błędy zaokrąglania

Omówmy typowe błędy popełniane podczas pracy z metodami matematycznymi.

Czasami początkujący programiści próbują używać funkcji Math.round() z dwoma parametrami.

Ta funkcja nie działa zgodnie z oczekiwaniami, ponieważ Math.round akceptuje tylko jedną wartość. Drugi parametr po prostu nie jest brany pod uwagę.

Rozwiązaniem jest użycie pojedynczego argumentu.

Czasami początkujący programiści uważają, że zaokrąglanie pomoże wyeliminować trudności związane z liczbami zmiennoprzecinkowymi.

Po pierwsze, należy poprawić dokładność.

Dowiedz się więcej fascynujących faktów o programowaniu na naszym kanale Telegram. Dołącz do nas!

Przeczytaj również:

• JavaScript to język programowania, który jest szeroko stosowany do tworzenia interaktywnych elementów na stronach internetowych. Jego główną funkcją jest dodawanie dynamiki i interaktywności do stron internetowych, umożliwiając użytkownikom interakcję z treścią w czasie rzeczywistym. JavaScript pozwala programistom manipulować elementami na stronie, obsługiwać zdarzenia takie jak kliknięcia przycisków lub ruchy myszy, a także wchodzić w interakcję z serwerem w celu ładowania danych bez konieczności odświeżania całej strony.

  Co więcej, język ten jest ważną częścią współczesnego tworzenia stron internetowych, ponieważ działa w połączeniu z HTML i CSS, tworząc triadę technologii niezbędnych do tworzenia nowoczesnych aplikacji internetowych. JavaScript jest również obsługiwany przez wszystkie nowoczesne przeglądarki, co czyni go wszechstronnym narzędziem dla programistów chcących tworzyć rozwiązania wieloplatformowe.

• Podstawowe operatory w JavaScript
• Funkcje w JavaScript: jak je poprawnie tworzyć, wywoływać i używać