Zaokrouhlení na celé číslo

Zaokrouhlit na celé číslo může být celkem častá akce, zvláště pokud počítáte layout stránky dynamicky.

//zobraz 3 LI vedle sebe v jedné řádce
$('li').width($(window).width() / 3);

Jelikož DOM nemá moc rád desetinná čísla v nastavení pixelů (i když u zařízení s vyšším DPR mohou být „půl-pixely“ užitečné), je dobré spočtenou velikost zaokrouhlit:

//zobraz 3 LI vedle sebe v jedné řádce
$('li').width(Math.round($(window).width() / 3));

Někdo ale rád používá parseInt pro jeho jednoduchost:

//zobraz 3 LI vedle sebe v jedné řádce
$('li').width(parseInt($(window).width() / 3));

Obliba a domnělá výkonnost funkce parseInt bude pravdpodobně v tom, že Firefox (který díky Firebugu dříve používala převážná většina vývojářů) je skutečně ve funkci parseInt rychlejší než s Math.round().

Nicméně v dnešní době nemůžeme upřednostňovat jeden prohlížeč (a zvláště ne Firefox, který se bohužel řadí mezi jeden z nejméně rozšířených) a jednoduchým spuštěním testu se dozvíme, že desktopový Firefox je jediný a ostatní browsery vychází skoro nastejno (Safari, IE, iPhone) a nebo je parseInt() výrazně pomalejší (Chrome, Android) – v případě Chrome dokonce desetkrát pomalejší.

Je to tím, že při použití parseInt() je potřeba nejprve desetiné číslo převést na řetězec a poté z něj vyparsovat čísla konče tečkou nebo čárkou. Probíhají tedy (zbytečně) dvě operace s řetězci, když vám stačí pracovat s čísly.

Ještě jsem našel jeden způsob a tím je použití metody Number.toFixed():

//zobraz 3 LI vedle sebe v jedné řádce
$('li').width(
    new Number(
        new Number(
            $(window).width() / 3
        ).toFixed(0)
    ).valueOf()
);

Nicméně tahle metoda je o pár procent ještě pomalejší než parseInt(), protože metoda musí dvakrát vytvořit nový objekt Number. Sice by se dal upravit a trochu zrychlit, ale pořád to není nic proti Math.Round():

//zobraz 3 LI vedle sebe v jedné řádce
$('li').width(
    +(
        $(window).width() / 3
    ).toFixed(0)
);

Shrnutí

Pokud si nejste 100% jisti, používejte metody na to, na co jsou určeny – tedy parseInt() pro převod řetězce na číslo a Math.round() na zaokrouhlování.

Napsat komentář

Vaše e-mailová adresa nebude zveřejněna. Vyžadované informace jsou označeny *

Tato stránka používá Akismet k omezení spamu. Podívejte se, jak vaše data z komentářů zpracováváme..