Zvládnutie formátovania reťazcov v jazyku JavaScript pomocou sprintf()

Všadeprítomnosť funkcie sprintf

Paradigma sprintf, alebo funkcie s podobnou syntaxou a možnosťami, je rozšírená v mnohých programovacích jazykoch. Vývojári, ktorí sú oboznámení s jazykmi ako C, Python (operátor % alebo f-reťazce s podobnými možnosťami formátovania), PHP (sprintf), Java (String.format) a mnohými ďalšími, rozpoznajú silu a pohodlie tohto prístupu.

Napríklad v jazyku Python by ste mohli napísať:

meno = "Laptop"
cena = 99.99
sprava = "Produkt '%s' stojí %.2f €." % (meno, cena)
print(sprava) # Výstup: Produkt 'Laptop' stojí 99.99 €.

JavaScriptu však chýba priamy ekvivalent zabudovaný priamo do jazyka. Práve tu sa knižnice ako sprintf.js stávajú nevyhnutnými a ponúkajú vývojárom JavaScriptu rovnakú úroveň kontroly a expresivity pri formátovaní reťazcov.

Prečo je sprintf lepší ako spájanie reťazcov

Tradičné spájanie reťazcov v jazyku JavaScript často zahŕňa použitie operátora + alebo šablónových literálov. Hoci tieto metódy fungujú pre jednoduché prípady, pri zložitejších požiadavkách na formátovanie sa môžu stať ťažkopádnymi a menej čitateľnými. sprintf ponúka niekoľko výhod:

Čitateľnosť: Pri práci s viacerými premennými a požiadavkami na formátovanie udržuje sprintf šablónu reťazca a hodnoty oddelené, čím sa kód stáva ľahšie čitateľným a zrozumiteľným.

// Spájanie reťazcov
const nazovPolozky = "Laptop";
const zlava = 0.15;
const cena = 1200;
const spravaSpojenim = "Produkt " + nazovPolozky + " je v akcii! Ušetríte " + (zlava * 100) + "% a zaplatíte €" + (cena * (1 - zlava)).toFixed(2) + ".";
console.log(spravaSpojenim);

// Použitie sprintf.js
import { sprintf } from '@playfulsparkle/sprintf-js';

const spravaSprintf = sprintf("Produkt %s je v akcii! Ušetríte %.0f%% a zaplatíte €%.2f.", nazovPolozky, zlava * 100, cena * (1 - zlava));
console.log(spravaSprintf);

Ako vidíte, verzia s sprintf je výrazne stručnejšia a jasne načrtáva štruktúru výsledného reťazca.

Kontrola nad formátovaním: sprintf poskytuje presnú kontrolu nad tým, ako sa hodnoty formátujú, vrátane:

• Odsadenie: Pridanie znakov (ako medzery alebo nuly) na zabezpečenie určitej šírky.
• Zarovnanie: Zarovnanie doľava, doprava alebo na stred v rámci špecifikovanej šírky.
• Presnosť: Kontrola počtu desatinných miest pre čísla s pohyblivou desatinnou čiarkou.

import { sprintf } from '@playfulsparkle/sprintf-js';

const cislo = 12.345;
const cisloSMedzerami = sprintf("%05.2f", cislo); // Výstup: "012.35" (odsadené úvodnými nulami, 2 desatinné miesta)
const zarovnanyText = sprintf("%10s", "Hello"); // Výstup: "         Hello" (zarovnané doprava, šírka 10)

Vhodnosť pre lokalizáciu: Pri príprave reťazcov pre rôzne jazyky sa formáty podobné sprintf často dobre integrujú s rámcami pre lokalizáciu. Oddelenie šablóny reťazca od skutočných hodnôt uľahčuje správu prekladov. Hoci samotná knižnica sprintf.js nezvláda plnú internacionalizáciu (ako pravidlá pre množné číslo), je vynikajúca na formátovanie údajov v rámci preložených reťazcov.

Predstavujeme sprintf.js

sprintf.js od Playful Sparkle je dobre udržiavaná, nenáročná a open-source knižnica, ktorá verne implementuje funkcionalitu sprintf v jazyku JavaScript. Je to fantastická voľba pre vývojárov, ktorí potrebujú robustné možnosti formátovania reťazcov bez zbytočnej réžie rozsiahlejších pomocných knižníc.

npm install @playfulsparkle/sprintf-js

bower install playfulsparkle/sprintf.js

// Import funkcie sprintf
import { sprintf } from '@playfulsparkle/sprintf-js';

const pozdrav = sprintf("Ahoj, %s!", "Svet");
console.log(pozdrav); // Výstup: Ahoj, Svet!

Ponor do API knižnice sprintf.js

sprintf.js primárne ponúka dve funkcie: sprintf() a vsprintf().

string sprintf(string format, mixed arg1?, mixed arg2?, ...)

Toto je hlavná funkcia. Ako prvý argument prijíma formátovací reťazec, za ktorým nasledujú hodnoty, ktoré sa majú vložiť do reťazca podľa zástupných symbolov vo formátovacom reťazci.

import { sprintf } from '@playfulsparkle/sprintf-js';

const meno = "Dávid";
const skore = 95;
const sprava = sprintf("Študent %s dosiahol skóre %d.", meno, skore);
console.log(sprava); // Výstup: Študent Dávid dosiahol skóre 95.

const cisloPi = Math.PI;
const formatovanePi = sprintf("Hodnota pí je približne %.2f.", cisloPi);
console.log(formatovanePi); // Výstup: Hodnota pí je približne 3.14.

string vsprintf(string format, array argv)

Táto funkcia je podobná funkcii sprintf(), ale namiesto jednotlivých argumentov prijíma pole argumentov. To je užitočné najmä vtedy, keď máte hodnoty, ktoré sa majú formátovať, uložené v poli.

import { vsprintf } from '@playfulsparkle/sprintf-js';

const udaje = ["David", 88, "Veda"];
const sprava = vsprintf("Študent %s získal %d bodov z %s.", udaje);
console.log(sprava); // Výstup: Študent David získal 88 bodov z Vedy.

Zvládnutie zástupných symbolov vo formátovacom reťazci

Sila knižnice sprintf.js spočíva v jej zástupných symboloch vo formátovacom reťazci. Tieto zástupné symboly definujú, ako sa majú poskytnuté argumenty formátovať a vkladať do výsledného reťazca. Všeobecná syntax pre zástupný symbol je:

%[index_argumentu$][príznaky][šírka][.presnosť]typ

Poďme si rozobrať jednotlivé komponenty:

• %: Literálny znak percenta, ktorý označuje začiatok zástupného symbolu.
• [index_argumentu$] (Voliteľné): Umožňuje explicitne špecifikovať, ktorý argument sa má použiť pre tento zástupný symbol. Napríklad, %2$s by použil druhý argument ako reťazec.
• [príznaky] (Voliteľné): Modifikátory, ktoré ovplyvňujú formát výstupu. Medzi bežné príznaky patria:
  • +: Núti pred výsledok číselných typov pridať znamienko plus alebo mínus.
  • : (medzera) Ak sa nemá zapísať žiadne znamienko, pred číslo sa vloží prázdna medzera.
  • 0: Doplní číslo úvodnými nulami na špecifikovanú šírku.
  • -: Zarovná výsledok doľava v rámci špecifikovanej šírky.
• [šírka] (Voliteľné): Celé číslo, ktoré špecifikuje minimálny počet znakov, ktoré sa majú vypísať. Ak je výstup kratší ako toto číslo, doplní sa (zvyčajne medzerami, alebo nulami, ak sa použije príznak 0).
• [.presnosť] (Voliteľné): Špecifikuje počet číslic za desatinnou čiarkou pre čísla s pohyblivou desatinnou čiarkou, alebo maximálnu dĺžku reťazca. Predchádza mu bodka (.).
• typ (Povinné): Jeden znak, ktorý špecifikuje typ argumentu, ktorý sa má formátovať. Tu je tabuľka bežných špecifikátorov typov podporovaných knižnicou sprintf.js:

import { sprintf } from '@playfulsparkle/sprintf-js';

// Index argumentu
console.log(sprintf("%2$s %1$s", "Svet", "Ahoj")); // Výstup: Ahoj Svet

// Príznaky
console.log(sprintf("%+d", 10));     // Výstup: +10
console.log(sprintf("% d", 10));     // Výstup:  10
console.log(sprintf("%05d", 5));     // Výstup: 00005
console.log(sprintf("%-5s", "Hi"));   // Výstup: Hi

// Šírka
console.log(sprintf("%10s", "Test"));   // Výstup:         Test (zarovnané doprava)
console.log(sprintf("%-10s", "Test")); // Výstup: Test        (zarovnané doľava)

// Presnosť
console.log(sprintf("%.2f", 3.14159)); // Výstup: 3.14
console.log(sprintf("%.5s", "JavaScript")); // Výstup: JavaS

// Kombinácia možností
console.log(sprintf("%010.2f", 123.456)); // Výstup: 0000123.46

Uvoľnenie pokročilých funkcií knižnice sprintf.js

sprintf.js ponúka niekoľko pokročilých funkcií, ktoré môžu ďalej vylepšiť vaše možnosti formátovania reťazcov.

import { sprintf } from '@playfulsparkle/sprintf-js';

const krstneMeno = "Ján";
const priezvisko = "Novák";
console.log(sprintf("Priezvisko: %2$s, Meno: %1$s", krstneMeno, priezvisko));
// Výstup: Priezvisko: Novák, Meno: Ján

import { sprintf } from '@playfulsparkle/sprintf-js';

const pouzivatel = { meno: "Jarka", vek: 25 };
const sprava = sprintf("Používateľka %(meno)s má %(vek)d rokov.", pouzivatel);
console.log(sprava); // Výstup: Používateľka Jarka má 25 rokov.

const produkt = { id: "PROD123", cena: 49.99 };
const informacieOProdukte = sprintf("ID produktu: %(id)s, Cena: €%.2f", produkt);
console.log(informacieOProdukte); // Výstup: ID produktu: PROD123, Cena: €49.99

Praktické aplikácie knižnice sprintf.js

sprintf.js môže byť neuveriteľne užitočný v rôznych scenároch vývoja v jazyku JavaScript:

import { sprintf } from '@playfulsparkle/sprintf-js';

const zakladnaAdresaUrl = "[https://api.example.com/users/%d](https://www.google.com/search?q=https://api.example.com/users/%25d)";
const idPouzivatela = 123;
const adresaUrlApi = sprintf(zakladnaAdresaUrl, idPouzivatela);
console.log(adresaUrlApi); // Výstup: [https://api.example.com/users/123](https://www.google.com/search?q=https://api.example.com/users/123)

const adresaUrlVyhladavania = "[https://search.example.com?query=%s&page=%d](https://www.google.com/search?q=https://search.example.com%3Fquery%3D%25s%26page%3D%25d)";
const vyhladavaciDotaz = "javascript";
const cisloStrany = 2;
const plnaAdresaUrlVyhladavania = sprintf(adresaUrlVyhladavania, encodeURIComponent(vyhladavaciDotaz), cisloStrany);
console.log(plnaAdresaUrlVyhladavania); // Výstup: [https://search.example.com?query=javascript&page=2](https://www.google.com/search?q=https://search.example.com%3Fquery%3Djavascript%26page%3D2)

import { sprintf } from '@playfulsparkle/sprintf-js';

const casovaZnacka = new Date().toISOString();
const uroven = "CHYBA";
const sprava = "Nepodarilo sa pripojiť k databáze.";
const spravaZaznamu = sprintf("[%s] [%s] %s", casovaZnacka, uroven, sprava);
console.log(spravaZaznamu);

Podpora a kompatibilita

sprintf.js je navrhnutý tak, aby bol vysoko kompatibilný s rôznymi prostrediami JavaScriptu. Podľa repozitára na GitHub:

• Node.js: Bezproblémovo funguje s modernými verziami Node.js.
• Prehliadače: Kompatibilný s väčšinou moderných webových prehliadačov. Repozitár poskytuje tabuľku podpory prehliadačov, do ktorej by ste mali nahliadnuť pre konkrétne podrobnosti o podporovaných verziách. Všeobecne je kompatibilný s:
  • Chrome
  • Firefox
  • Safari
  • Edge
  • Internet Explorer (konkrétne podporované verzie nájdete v tabuľke)

Pre staršie prehliadače, ktorým môžu chýbať určité funkcie JavaScriptu, možno budete musieť zahrnúť polyfily, aby ste zabezpečili plnú kompatibilitu. Pre väčšinu moderných vývojových prostredí by však sprintf.js mal fungovať ihneď po inštalácii.

Záver

Formátovanie reťazcov je kľúčovou zručnosťou pre softvérových vývojárov a metóda sprintf ponúka výkonný a čitateľný spôsob, ako dosiahnuť presnú kontrolu nad textovým výstupom. Knižnica sprintf.js od Playful Sparkle prináša tento široko používaný štandard do sveta JavaScriptu a poskytuje nenáročné a efektívne riešenie pre vývojárov, ktorí potrebujú robustné možnosti formátovania reťazcov. Zvládnutím zástupných symbolov vo formátovacom reťazci a pochopením API knižnice môžete výrazne zlepšiť prehľadnosť a udržiavateľnosť vášho kódu JavaScriptu.

Odporúčame vám ďalej preskúmať knižnicu sprintf.js na jej repozitári na GitHub: https://github.com/playfulsparkle/sprintf.js (otvorí sa v novom okne).

Otázky