Cara menggunakan float limit javascript
Toggle floats on any element, across any breakpoint, using our responsive float utilities.
Overview
These utility classes float an element to the left or right, or disable floating, based on the current viewport size using the CSS float
property. !important
is included to avoid specificity issues. These use the same viewport breakpoints as our grid system. Please
be aware float utilities have no affect on flex items.
Classes
Toggle a float with a class:
Float left on all viewport sizes
Float right on all viewport sizes
Don't float on all viewport sizes
Float left on all viewport sizes
Float right on all viewport sizes
Don't float on all viewport sizesMixins
Or by Sass mixin:
.element {
@include float-left;
}
.another-element {
@include float-right;
}
.one-more {
@include float-none;
}
Responsive
Responsive variations also exist for each float
value.
Float left on viewports sized SM [small]
or wider
Float left on viewports sized MD [medium] or wider
Float left on viewports sized LG [large] or wider
Float left on viewports sized XL [extra-large] or wider
Float left on viewports sized SM [small] or wider
Float left on viewports sized MD [medium] or wider
Float left on viewports sized LG [large] or wider
Float left on viewports sized XL [extra-large] or wider
Here are all the support classes;
.float-left
.float-right
.float-none
.float-sm-left
.float-sm-right
.float-sm-none
.float-md-left
.float-md-right
.float-md-none
.float-lg-left
.float-lg-right
.float-lg-none
.float-xl-left
.float-xl-right
.float-xl-none
Saya memiliki skrip tes dummy berikut:
function test[]{
var x = 0.1 * 0.2;
document.write[x];
}
test[];
Ini akan mencetak hasil 0.020000000000000004
sementara itu hanya harus mencetak 0.02
[jika Anda menggunakan kalkulator Anda]. Sejauh yang saya mengerti ini adalah karena kesalahan dalam presisi multiplikasi floating point.
Adakah yang punya solusi yang baik sehingga dalam kasus seperti itu saya mendapatkan hasil yang benar 0.02
? Saya tahu ada fungsi-fungsi seperti toFixed
atau pembulatan akan menjadi kemungkinan lain, tetapi
saya ingin benar-benar mencetak seluruh nomor tanpa pemotongan dan pembulatan. Hanya ingin tahu apakah salah satu dari Anda memiliki solusi yang bagus dan elegan.
Tentu saja, kalau tidak saya akan membulatkan sekitar 10 digit atau lebih.
Dari Panduan
Titik Terapung :
Apa yang bisa saya lakukan untuk menghindari masalah ini?
Itu tergantung pada jenis perhitungan yang Anda lakukan.
- Jika Anda benar-benar membutuhkan hasil Anda menambahkan dengan tepat, terutama ketika Anda. bekerja dengan uang: gunakan desimal khusus tipe data.
- Jika Anda tidak ingin melihat semua tempat desimal ekstra: cukup format hasil Anda dibulatkan menjadi tetap jumlah tempat desimal saat menampilkannya.
- Jika Anda tidak memiliki tipe data desimal, alternatifnya adalah bekerja dengan bilangan bulat, mis. lakukan uang perhitungan sepenuhnya dalam sen. Tapi ini lebih banyak pekerjaan dan memiliki beberapa kekurangannya.
Perhatikan bahwa poin pertama hanya berlaku jika Anda benar-benar membutuhkan perilaku desimalyang tepat. Kebanyakan orang tidak membutuhkan itu, mereka hanya kesal karena program mereka tidak bekerja dengan benar dengan angka-angka seperti 1/10
tanpa menyadari bahwa mereka bahkan tidak akan berkedip pada kesalahan yang sama jika terjadi dengan 1/3.
Jika poin pertama benar-benar berlaku untuk Anda, gunakan BigDecimal untuk JavaScript , yang tidak elegan sama sekali, tetapi sebenarnya menyelesaikan masalah daripada memberikan solusi yang tidak sempurna.
Saya suka solusi Pedro Ladaria dan menggunakan sesuatu yang serupa.
function strip[number] {
return [parseFloat[number].toPrecision[12]];
}
Tidak seperti solusi Pedros ini akan mengumpulkan 0,999 ... berulang dan akurat untuk plus/minus pada digit paling signifikan.
Catatan: Saat berurusan dengan float 32 atau 64 bit, Anda harus menggunakan toPrecision [7] dan toPrecision [15] untuk hasil terbaik. Lihat
pertanyaan ini untuk info mengapa.
Untuk yang cenderung secara matematis: //docs.Oracle.com/cd/E19957-01/806-3568/ncg_goldberg.html
Pendekatan yang disarankan
adalah menggunakan faktor koreksi [dikalikan dengan kekuatan 10 yang sesuai sehingga aritmatika terjadi di antara bilangan bulat]. Misalnya, dalam kasus 0.1 * 0.2
, faktor koreksi adalah 10
, dan Anda melakukan perhitungan:
> var x = 0.1
> var y = 0.2
> var cf = 10
> x * y
0.020000000000000004
> [x * cf] * [y * cf] / [cf * cf]
0.02
Solusi [sangat cepat] terlihat seperti:
var _cf = [function[] {
function _shift[x] {
var parts = x.toString[].split['.'];
return [parts.length < 2] ? 1 : Math.pow[10, parts[1].length];
}
return function[] {
return Array.prototype.reduce.call[arguments, function [prev, next] { return prev === undefined || next === undefined ? undefined : Math.max[prev, _shift [next]]; }, -Infinity];
};
}][];
Math.a = function [] {
var f = _cf.apply[null, arguments]; if[f === undefined] return undefined;
function cb[x, y, i, o] { return x + f * y; }
return Array.prototype.reduce.call[arguments, cb, 0] / f;
};
Math.s = function [l,r] { var f = _cf[l,r]; return [l * f - r * f] / f; };
Math.m = function [] {
var f = _cf.apply[null, arguments];
function cb[x, y, i, o] { return [x*f] * [y*f] / [f * f]; }
return Array.prototype.reduce.call[arguments, cb, 1];
};
Math.d = function [l,r] { var f = _cf[l,r]; return [l * f] / [r * f]; };
Pada kasus ini:
> Math.m[0.1, 0.2]
0.02
Saya pasti merekomendasikan menggunakan perpustakaan yang diuji seperti
SinfulJS
Anda mencari implementasi sprintf
untuk JavaScript, sehingga Anda dapat menulis float dengan kesalahan kecil di dalamnya [karena disimpan dalam format biner] dalam format yang Anda harapkan.
Coba
javascript-sprintf , Anda akan menyebutnya seperti ini:
var yourString = sprintf["%.2f", yourNumber];
untuk mencetak nomor Anda sebagai pelampung dengan dua tempat desimal.
Anda juga dapat menggunakan Number.toFixed [] untuk tujuan tampilan, jika Anda lebih suka tidak menyertakan
lebih banyak file hanya untuk pembulatan titik mengambang ke presisi yang diberikan.
Saya menemukan BigNumber.js memenuhi kebutuhan saya.
Pustaka JavaScript untuk aritmatika desimal dan non desimal presisi arbitrer.
Memiliki
dokumentasi yang baik dan penulis sangat rajin menanggapi umpan balik.
Penulis yang sama memiliki 2 perpustakaan serupa lainnya:
Big.js
Pustaka JavaScript kecil dan cepat untuk aritmatika desimal presisi-sembarang. Adik perempuan ke bignumber.js.
dan Decimal.js
Jenis desimal presisi-arbitrer untuk JavaScript.
Berikut beberapa kode menggunakan BigNumber:
$[function[]{
var product = BigNumber[.1].times[.2];
$['#product'].text[product];
var sum = BigNumber[.1].plus[.2];
$['#sum'].text[sum];
}];
.1 × .2 =
.1 + .2 =
Fungsi ini akan menentukan presisi yang dibutuhkan dari perkalian dua angka floating point dan mengembalikan hasil dengan presisi yang sesuai. Meskipun tidak elegan.
function multFloats[a,b]{
var atens = Math.pow[10,String[a].length - String[a].indexOf['.'] - 1],
btens = Math.pow[10,String[b].length - String[b].indexOf['.'] - 1];
return [a * atens] * [b * btens] / [atens * btens];
}
var times = function [a, b] {
return Math.round[[a * b] * 100]/100;
};
---atau---
var fpFix = function [n] {
return Math.round[n * 100]/100;
};
fpFix[0.1*0.2]; // -> 0.02
---juga---
var fpArithmetic = function [op, x, y] {
var n = {
'*': x * y,
'-': x - y,
'+': x + y,
'/': x / y
}[op];
return Math.round[n * 100]/100;
};
--- seperti dalam ---
fpArithmetic['*', 0.1, 0.2];
// 0.02
fpArithmetic['+', 0.1, 0.2];
// 0.3
fpArithmetic['-', 0.1, 0.2];
// -0.1
fpArithmetic['/', 0.2, 0.1];
// 2
Anda hanya harus memutuskan berapa banyak angka desimal
yang Anda inginkan - tidak dapat memiliki kue dan memakannya juga :-]
Kesalahan numerik menumpuk dengan setiap operasi lebih lanjut dan jika Anda tidak memotongnya lebih awal, itu hanya akan tumbuh. Perpustakaan numerik yang menyajikan hasil yang terlihat bersih cukup memotong 2 digit terakhir pada setiap langkah, co-prosesor numerik juga memiliki panjang "normal" dan "penuh" untuk alasan yang sama. Cuf-offs murah untuk prosesor tetapi sangat mahal untuk Anda dalam skrip [mengalikan dan
membagi dan menggunakan pov [...]]. Lib matematika yang baik akan memberikan dasar [x, n] untuk melakukan cut-off untuk Anda.
Jadi, paling tidak Anda harus membuat global var/constant dengan pov [10, n] - artinya Anda memutuskan ketepatan yang Anda butuhkan :-] Lalu lakukan:
Math.floor[x*PREC_LIM]/PREC_LIM // floor - you are cutting off, not rounding
Anda juga bisa terus melakukan matematika dan hanya memotong pada akhirnya - dengan asumsi bahwa Anda hanya menampilkan dan tidak melakukan jika-s dengan hasil. Jika Anda dapat melakukannya, maka .toFixed
[...] mungkin lebih efisien.
Jika Anda melakukan if-s/perbandingan dan tidak ingin memotong maka Anda juga memerlukan konstanta kecil, biasanya disebut eps, yang merupakan satu tempat desimal lebih tinggi dari kesalahan yang diharapkan maks. Katakan bahwa cut-off Anda adalah dua desimal terakhir - maka eps Anda memiliki 1 di tempat ke-3 dari yang terakhir [ke-3 paling signifikan] dan Anda dapat menggunakannya untuk membandingkan apakah hasilnya berada dalam kisaran eps yang diharapkan
[0,02 -p