Avrundning av HTML-nummer. Sortera JSON-liknande struktur
Ofta ger beräkningarna resultat som inte motsvarar gränserna för de önskade intervallet. Som ett resultat måste du träna Javascript avrundning upp till ett visst värde.
Varför runda siffror?
Javascript lagrar inte heltal, eftersom deras värden presenteras i form av ett flytande punktnummer. Många fraktioner kan inte representeras av ett nummer med ett visst ändligt antal semikolon, så JavaScript kan generera resultat, som följande:
0.1 * 0.2; > 0.020000000000000004
I praktiken kommer det inte att uppstå eftersom vi pratar Om felet i 2 quinylonne. Men det kan påverka resultatet när man arbetar med siffror som representerar ventilvärden, procent eller filstorlek. Därför måste du göra eller upp till ett visst decimaltecken.
Avrundning decimaltal
Till " trim»DECIMAL NUMBER, TOFIXED () eller Toprecision () metoder används. De tar båda ett argument som bestämmer antalet signifikanta och märken efter kommatecken, vilket måste ingå i resultatet:
- om för tofixed () är argumentet inte definierat är standardvärdet 0, det vill säga inga tecken efter kommatecken. maximalt värde Argumentet är 20;
- om för topprecision () är argumentet inte angivet, ändras inte numret.
Notera
Och tofixed () och topprecision returnera en rundad nedre fall representation, och inte ett nummer. Det innebär att tillsats av en belägen till Randnum kommer att resultera i en concontining-sträng, och inte ett nummer:
Console.log (Randnum + rundad); \u003e "6.256"
Om du behöver komma in ett resultat av JavaScript Avrundning till mobilnumret, använd PARSEFLOAT ():
Var randnum \u003d 6,25; var rundad \u003d parsefloat (randnum.tofixed (1)); Konsol.log (avrundad); \u003e 6.3.
tofixed () och toprecision () är också användbara trunkeringsmetoder. stort antal decimaler. Det är bekvämt när du arbetar med siffror som representerar monetära enheter:
VaR Wholenum \u003d 1 Var Dollarscents \u003d Wholenum.Tofixed (2); Konsol.log (dollarstäder); \u003e "1,00"
Observera att om det finns fler tecken än den angivna noggrannhetsparametern, kommer Toprecision att ge ett resultat i ett vetenskapligt format:
Var num \u003d 123.435 num.toprecision (2); \u003e "1.2e + 2"
Hur man undviker misstag när du avrundar decimalfraktioner
I vissa fall utförs tofixed och toprecision Javascript avrundning 5 till en mindre sida, inte upp till mer:
Var numtest \u003d 1,005; numtest.tofixed (2); \u003e 1;
Resultatet av ovanstående exempel bör vara 1,01, och inte 1. Om du vill undvika detta fel rekommenderar jag att du använder exponentiella nummer:
Funktionsrunda (Returnummer (Math.Round (värde + E "+ decimaler) +" E - "+ decimaler);)
Ansökan:
Runda (1.005.2); \u003e 1.01
Om du behöver en ännu mer tillförlitlig lösning än avrundning är den tillgänglig på Mdn..
Avrundning med epsilon
Alternativ metod Javascript avrundning upp till tiondelar introducerades i ES6 ( Även känd som JavaScript 2015). "Maskin epsilon"Ger en rimlig gräns för felet när du jämför två flytande semikolon. Utan avrundning kan jämförelser ge resultat som följande:
0,1 + 0,2 \u003d\u003d\u003d 0,3\u003e FALSK
Math.epsilon kan användas i funktionen för att få en korrekt jämförelse:
Funktion EPOX (x, y) (returnera matte.abs (x - y)< Number.EPSILON * Math.max(Math.abs(x), Math.abs(y)); }
Funktionen tar två argument: En innehåller beräkningar, den andra förväntade ( avrundat) Resultat. Det returnerar en jämförelse av dessa två parametrar:
EPOX (0,1 + 0,2, 0,3)\u003e SANT
Alla moderna webbläsare stöder ES6 matematiska funktioner. Men om du behöver ge stöd i gamla webbläsare måste du använda Polyfilla.
Avkortning av decimaltal
Alla metoder som presenteras tidigare utför Javascript avrundning upp till tiondelar. För att trimma ett positivt antal upp till två ställen efter kommatecken, multiplicera det till 100, tråg igen, och då är det erhållna resultatet dividerat med 100, du behöver:
Funktion avkortad (Num) (Retur Math.TrNCR (NUM * 100) / 100;) Avkortad (3.1416)\u003e 3.14
Om något mer flexibel krävs, kan du använda den trasiga operatören:
Funktion avkortad (var numpowerconverter \u003d math.pow (10, decimalplaces); returnera ~ ~ (num * numpowerconverter) / numpowerconverter;)
Använder sig av:
Var Randint \u003d 35.874993; Trunkerad (Randint, 3); \u003e 35.874.
Avrundning till närmaste nummer
Att genomföra Javascript avrundning till det hela, Math.round () används:
Math.Round (4.3)\u003e 4 Math.round (4.5)\u003e 5
Anteckna det " halvvärden", som .5, avrundad.
Avrundning ner till närmaste heltal
Om du vill runda ner i en mindre sida, använd MATH.FLOOR () -metoden:
Math. Floor (42.23); \u003e 42 Math. Floor (36,93); \u003e 36.
Avrundning " ner"Den har en riktning för alla siffror, inklusive för negativ. Detta kan representeras som en skyskrapa med ett oändligt antal våningar, inklusive under grundnivå ( representerar negativa tal). Om du är i hissen mellan källargolv 2 och 3 ( vad som matchar värdet -2,5), Math. Floor levererar dig till golvet -3:
Math. Floor (-2,5); \u003e -3.
Om du vill undvika detta, använd Javascript Math Runding med Math.Trunc () som stöds i alla moderna webbläsare (förutom Ie / Edge):
Math.Trunc (-41,43); \u003e -41
MDN tillhandahåller också polyfill av tre linjer för att tillhandahålla Math.Trym Support i gamla webbläsare och dvs / kant.
Avrundning upp till närmaste heltal
Om du vill avrunda decimalnummer UP, använd math.Ceil. Åtgärden av denna metod kan också representeras som en oändlig hiss: Math.Ceil är alltid lycklig " upp", oavsett om numret är negativt eller positivt:
Math.Ceil (42.23); \u003e 43 Math.Ceil (36,93); \u003e 37 Math.Ceil (-36,93); -36Avrundning till närmaste flera nummer
Om du behöver runda värdet till närmaste nummer, flera 5, skapa en funktion som delar upp numret till 5, rundar den och multiplicerar sedan resultatet till samma värde:
Funktion Roundto5 (Num) (Retur Math.Round (Num / 5) * 5;)
Använder sig av:
Roundto5 (11); \u003e 10.
Om du vill utföra Javascript avrundning upp till två tecken kan du sända funktioner som det ursprungliga numret och multipliciteten:
Funktion RoundTomultiple (Num, Multiple) (Retur Math.Round (num / multiple) * Multiple;)
För att använda funktionen, sätt på det avrundade numret och multipliciteten i samtalet:
Var initialnumber \u003d 11; var multipel \u003d 10; RoundTomultiple (InitialNumber, Multiple); \u003e 10;
För att runda värdena endast i en stor eller mindre riktning, byt ut i rundfunktionen på tak eller golv.
Bindning till intervall
Ibland behöver du få värdet av x, vilket borde vara inom vissa intervall. Till exempel behöver du ett värde från 1 till 100, men vi får värdet 123. För att åtgärda det kan du använda min () ( returnerar det minsta antalet nummer) och max ( returnerar det maximala tillåtna numret).
Använder sig av:
Var lowbound \u003d 1; var highbound \u003d 100; var numinput \u003d 123; var klämmig \u003d math.max (lowbound, math.min (numinput, highbound)); Konsol.log (klämd); \u003e 100;
Du kan skapa en funktion eller förlängningsklassnummer:
Number.prototype.clamp \u003d Funktion (min, max) (returnera Math.min (Math.max (detta, min), max););
Använder sig av:
(Numinput) .clamp (lowbound, highbound);
Avrundning i gaussu
Avrundning i Gauss (" bank", konvergent eller nederländska) Det är en avrundningsmetod utan statistiskt fel. Standard Javascript avrundning Ibland ger fel i de flesta. Avrundning i Gaussus undviker detta fel med hjälp av att avrunda till närmaste jämnt tal. Den bästa lösningenJag vet:
Funktion Gaussround (num, decimalplaces) (var d \u003d decimalplaces || 0, m \u003d math.pow (10, d), n \u003d + (d? Num * m: num) .tofixed (8), i \u003d math.floor (n), f \u003d n - i, e \u003d 1e-8, r \u003d (f\u003e 0,5 - e && f< 0.5 + e) ? ((i % 2 == 0) ? i: i + 1) : Math.round(n); return d ? r / m: r; }
Exempel på att använda:
Gaussround (2.5)\u003e 2 Gaussround (3.5)\u003e 4 Gaussround (2.57,1)\u003e 2.6
Decimalnummer i CSS
Eftersom JavaScript ofta används för att få information om positionen eller omvandlingen av HTML-element, kan du undra vad som händer om vi genererar decimalvärden för föremål:
#Box (Bredd: 63.667731993px;)
Moderna webbläsare stöder decimalvärden i en blockmodell, inklusive procent och pixelenheter.
Översättningen av artikeln Javascript Runding Recept utarbetades av ett vänligt team av projektets webbplatsbyggnad från A till Ya.
Ofta ger beräkningarna resultat som inte motsvarar gränserna för de önskade intervallet. Som ett resultat måste du träna Javascript avrundning upp till ett visst värde.
Varför runda siffror?
Javascript lagrar inte heltal, eftersom deras värden presenteras i form av ett flytande punktnummer. Många fraktioner kan inte representeras av ett nummer med ett visst ändligt antal semikolon, så JavaScript kan generera resultat, som följande:
0.1 * 0.2; > 0.020000000000000004
I praktiken kommer det inte att ha någon betydelse, eftersom det kommer till felet i 2 quinylonne. Men det kan påverka resultatet när man arbetar med siffror som representerar ventilvärden, procent eller filstorlek. Därför måste du göra eller upp till ett visst decimaltecken.
Avrundning decimaltal
För att "trimma" ett decimaltal, tofixed () eller toprecision () används. De tar båda ett argument som bestämmer antalet signifikanta och märken efter kommatecken, vilket måste ingå i resultatet:
- om för tofixed () är argumentet inte definierat är standardvärdet 0, det vill säga inga tecken efter kommatecken. Det maximala värdet av argumentet är 20;
- om för topprecision () är argumentet inte angivet, ändras inte numret.
var randnum \u003d 6,25; randnum.tofixed (); \u003e "6" math.pi.toprecision (1); \u003e "3" var randnum \u003d 87.335; Randnum.tofixed (2); \u003e "87,33" VAR Randnum \u003d 87.337; Randnum.toprecision (3); \u003e "87,3"
Notera
Och tofixed () och topprecision returnera en rundad nedre fall representation, och inte ett nummer. Det innebär att tillsats av en belägen till Randnum kommer att resultera i en concontining-sträng, och inte ett nummer:
console.log (Randnum + rundad); \u003e "6.256"
Om du behöver få en JavaScript avrundning till hundratals, använd PARSEFLOAT ():
var randnum \u003d 6,25; var rundad \u003d parsefloat (randnum.tofixed (1)); Konsol.log (avrundad); \u003e 6.3.
tofixed () och toprecision () är också användbara metoder för att trunkera ett stort antal semikolon. Det är bekvämt när du arbetar med siffror som representerar monetära enheter:
vaR Wholenum \u003d 1 Var Dollarscents \u003d Wholenum.Tofixed (2); Konsol.log (dollarstäder); \u003e "1,00"
Observera att om det finns fler tecken än den angivna noggrannhetsparametern, kommer Toprecision att ge ett resultat i ett vetenskapligt format:
var num \u003d 123.435 num.toprecision (2); \u003e "1.2e + 2"
Hur man undviker misstag när du avrundar decimalfraktioner
I vissa fall utförs tofixed och toprecision Javascript avrundning 5 till en mindre sida, inte upp till mer:
var numtest \u003d 1,005; numtest.tofixed (2); \u003e 1;
Resultatet av ovanstående exempel bör vara 1,01, och inte 1. Om du vill undvika detta fel rekommenderar jag att du använder exponentiella nummer:
funktionsrunda (Returnummer (Math.Round (värde + E "+ decimaler) +" E - "+ decimaler);)
Ansökan:
runda (1.005.2); \u003e 1.01
Om du behöver en ännu mer tillförlitlig lösning än avrundning är den tillgänglig på Mdn..
Avrundning med epsilon
Alternativ metod Javascript avrundning upp till tiondelar introducerades i ES6 ( Även känd som JavaScript 2015). « Maskin epsilon»Ger en rimlig felgräns vid jämförelse av två flytande semikolon. Utan avrundning kan jämförelser ge resultat som följande:
0,1 + 0,2 \u003d\u003d\u003d 0,3\u003e FALSK
Math.epsilon kan användas i funktionen för att få en korrekt jämförelse:
funktion EPOX (x, y) (returnera matte.abs (x - y)< Number.EPSILON * Math.max(Math.abs(x), Math.abs(y)); }
Funktionen tar två argument: En innehåller beräkningar, det andra förväntade (avrundade) resultatet. Det returnerar en jämförelse av dessa två parametrar:
ePOX (0,1 + 0,2, 0,3)\u003e SANT
Alla moderna webbläsare stöder ES6 matematiska funktioner. Men om du behöver ge stöd i gamla webbläsare måste du använda Polyfilla.
Avkortning av decimaltal
Alla metoder som presenteras tidigare utför Javascript avrundning upp till tiondelar. För att trimma ett positivt antal upp till två ställen efter kommatecken, multiplicera det till 100, tråg igen, och då är det erhållna resultatet dividerat med 100, du behöver:
funktion avkortad (Num) (Retur Math.TrNCR (NUM * 100) / 100;) Avkortad (3.1416)\u003e 3.14
Om något mer flexibel krävs, kan du använda den trasiga operatören:
funktion avkortad (var numpowerconverter \u003d math.pow (10, decimalplaces); returnera ~ ~ (num * numpowerconverter) / numpowerconverter;)
Använder sig av:
var Randint \u003d 35.874993; Trunkerad (Randint, 3); \u003e 35.874.
Avrundning till närmaste nummer
Att genomföra Javascript avrundning till det hela, Math.round () används:
Math.Round (4.3)\u003e 4 Math.round (4.5)\u003e 5
Anteckna det " halvvärden", Som .5, avrundad.
Avrundning ner till närmaste heltal
Om du vill runda ner i en mindre sida, använd MATH.FLOOR () -metoden:
Math. Floor (42.23); \u003e 42 Math. Floor (36,93); \u003e 36.
Avrundning "ner" har en riktning för alla siffror, inklusive för negativt. Detta kan representeras som en skyskrapa med ett oändligt antal våningar, inklusive under grundnivå ( representerar negativa tal). Om du är i hissen mellan källargolv 2 och 3 ( vad som matchar värdet -2,5), Math. Floor levererar dig till golvet -3:
Math. Floor (-2,5); \u003e -3.
Om du vill undvika detta, använd JavaScript Math Runding med Math.TrNCN () som stöds i alla moderna webbläsare (förutom Dvs / kant.):
Math.Trunc (-41,43); \u003e -41
MDN tillhandahåller också polyfill av tre linjer för att tillhandahålla Math.Trym Support i gamla webbläsare och dvs / kant.
Avrundning upp till närmaste heltal
Om du vill roa ned decimalnummer, använd Math.Ceil. Åtgärden av denna metod kan också representeras som en oändlig hiss: Math.Ceil är alltid lycklig "upp", oavsett om numret är negativt eller positivt:
Math.Ceil (42.23); \u003e 43 Math.Ceil (36,93); \u003e 37 Math.Ceil (-36,93); -36
Avrundning till närmaste flera nummer
Om du behöver runda värdet till närmaste nummer, flera 5, skapa en funktion som delar upp numret till 5, rundar den och multiplicerar sedan resultatet till samma värde:
funktion Roundto5 (Num) (Retur Math.Round (Num / 5) * 5;)
Använder sig av:
roundto5 (11); \u003e 10.
Om du vill utföra Javascript avrundning upp till två tecken kan du sända funktioner som det ursprungliga numret och multipliciteten:
funktion RoundTomultiple (Num, Multiple) (Retur Math.Round (num / multiple) * Multiple;)
För att använda funktionen, sätt på det avrundade numret och multipliciteten i samtalet:
var initialnumber \u003d 11; var multipel \u003d 10; RoundTomultiple (InitialNumber, Multiple); \u003e 10;
För att runda värdena endast i en stor eller mindre riktning, byt ut i rundfunktionen på tak eller golv.
Bindning till intervall
Ibland behöver du få värdet X, som borde vara inom ett visst område. Till exempel behöver du ett värde från 1 till 100, men vi får värdet 123. För att åtgärda det kan du använda min () ( returnerar det minsta antalet nummer) och max ( returnerar det maximala tillåtna numret).
Använder sig av:
var lowbound \u003d 1; var highbound \u003d 100; var numinput \u003d 123; var klämmig \u003d math.max (lowbound, math.min (numinput, highbound)); Konsol.log (klämd); \u003e 100;
Du kan skapa en funktion eller förlängningsklassnummer:
Number.prototype.clamp \u003d Funktion (min, max) (returnera Math.min (Math.max (detta, min), max););
Använder sig av:
(Numinput) .clamp (lowbound, highbound);
Avrundning i gaussu
Avrundning i Gaussia ("Banking", konvergent eller nederländska) Det är en avrundningsmetod utan statistiskt fel. Standard Javascript avrundning Ibland ger fel i det stora ansiktet. Avrundning i Gaussus undviker detta fel med hjälp av att avrunda till närmaste jämnt tal. Den bästa lösningen som jag vet.
Hej. Idag, i JavaScript-kolumnen, kommer vi att titta på hur man sätter på JavaScript antalet seasoliner i flytande poäng. Till exempel måste du lämna 3 decimaltecken när du visar, eller bara två.
Uppgift: Javascript Antal semikolon
Så vi står inför uppgiften: det finns ett resultat av beräkningar, där det finns siffror före semikolonerna och efter kommatecken. Decimal. Antag att resultatet visade sig 1538.9891200153. Men när utgången ska vara numret som återspeglar beloppet, där mängden sedlar är upp till kommatecken och efter - kopecks.
Det finns flera sätt att lösa den här uppgiften.
Lösning 1: Javascript Antal semikolon med den tofixed metoden
tofixed är en inbäddad i JavaScript-metod som tillämpas på vilket nummer som helst, noggrannheten tar en noggrannhet avrundning (det vill säga antalet havsytor).
Var num \u003d 1538.9891200153; num_str \u003d num.tofixed (); // num_str \u003d 1538; num_str \u003d num.tofixed (2); //Num_str\u003d1538,98; num_str \u003d num.tofixed (5); //Num_str\u003d1538.98912;
Noggrannhetsparametern i den här funktionen ska vara minst 0 (tar inte negativa värden) och inte mer än 20.
Du kan också göra utan en variabel, till exempel, så här:
Num_str \u003d (1538.9891200153) .Tofixed (2); //Num_str\u003d1538,98;
Lösning 2: Javascript Antal semikolon med toprecisionsmetoden
Denna lösning är baserad på samma inbyggda javascript-metod. En särskiljande funktion Denna metod är att parametern som tas till ingången indikerar inte noggrannhet (antalet decimalskyltar), men det totala antalet tecken (både till kommatecken och efter det).
Var num \u003d 1538.9891200153; num_str \u003d num.toprecision (5); //Num_str\u003d1538.9; num_str \u003d num.toprecision (7); //Num_str\u003d1538.989;
Lösning utan tecken efter ett komma: Javascript Antal semikolon
Om decimalskyltarna måste vara helt vikta, det vill säga måste du runda ett fraktionellt nummer Före det hela kan du använda matematikens funktioner: rund, tak och golv.
Runda rundor i en stor eller mindre sida (beroende på numret). Om värdet efter semikolonerna är mer än hälften, rundar sedan till hela sidan, om mindre - till mindre. Det vill säga, om 0,51 - kommer att vara 1, om 0,49 - 0.
Tak - från engelska. Taket är alltid avrundat till den största sidan.
Golv - från engelska. Paulrundor alltid i en mindre sida.
Var num \u003d 1538.9891200153; num_str \u003d math.round (num); // num_str \u003d 1539; num_str \u003d math.floor (num); // num_str \u003d 1538; num_str \u003d Math.Ceil (Num); // num_str \u003d 1539;
Det är allt. Jag hoppas att den här noten hjälpte dig att lösa uppgiften. Om något misslyckades - fråga frågor med den gröna knappen "Ställ en fråga från en specialist", eller i kommentarerna.