JavaScriptben való szövegformázás mesterfokon a sprintf segítségével

A sprintf elterjedtsége

A sprintf paradigma, vagy a hasonló szintaxissal és képességekkel rendelkező függvények, számos programozási nyelvben elterjedtek. Azok a fejlesztők, akik ismerik a C, Python (% operátor vagy hasonló formázási opciókkal rendelkező f-stringek), PHP (sprintf), Java (String.format) és sok más nyelvet, felismerik ennek a megközelítésnek az erejét és kényelmét.

Például Pythonban a következőképpen írhatja:

nev = "Laptop"
ar = 99.99
uzenet = "A termék '%s' ára %.2f." % (nev, ar)
print(uzenet) # Kimenet: A termék 'Laptop' ára 99.99.

A JavaScript azonban nem rendelkezik közvetlen, beépített megfelelővel. Itt válnak nélkülözhetetlenné az olyan könyvtárak, mint a sprintf.js, amelyek a JavaScript fejlesztők számára ugyanazt a szintű kontrollt és kifejezőerőt kínálják a szövegformázáshoz.

Miért jobb a sprintf a szövegösszefűzésnél?

A hagyományos szövegösszefűzés JavaScriptben gyakran a + operátor vagy a template literálok használatát jelenti. Bár ezek a módszerek egyszerű esetekben működnek, bonyolultabb formázási követelmények esetén nehézkessé és kevésbé olvashatóvá válhatnak. A sprintf számos előnyt kínál:

Olvashatóság: Több változó és formázási követelmény kezelésekor a sprintf külön tartja a szövegsablont és az értékeket, ami megkönnyíti a kód olvasását és megértését.

// Szövegösszefűzés
const termekNeve = "Laptop";
const kedvezmeny = 0.15;
const ar = 1200;
const osszefuzottUzenet = "A " + termekNeve + " akciós! Megtakarításod " + (kedvezmeny * 100) + "% és a fizetendő összeg $" + (ar * (1 - kedvezmeny)).toFixed(2) + ".";
console.log(osszefuzottUzenet);

// A sprintf.js használatával
import { sprintf } from '@playfulsparkle/sprintf-js';

const sprintfUzenet = sprintf("A %s akciós! Megtakarításod %.0f%% és a fizetendő összeg $%.2f.", termekNeve, kedvezmeny * 100, ar * (1 - kedvezmeny));
console.log(sprintfUzenet);

Mint látható, a sprintf verzió jelentősen tömörebb és egyértelműbben vázolja fel a végső karakterlánc szerkezetét.

Formázás feletti kontroll: A sprintf pontos kontrollt biztosít az értékek formázása felett, beleértve:

• Kiegészítés (Padding): Karakterek (például szóközök vagy nullák) hozzáadása a kívánt szélesség biztosításához.
• Igazítás (Alignment): Balra, jobbra vagy középre igazítás a megadott szélességen belül.
• Pontosság (Precision): A tizedesjegyek számának szabályozása lebegőpontos számok esetén.

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

const szam = 12.345;
const kiegeszitettSzam = sprintf("%05.2f", szam); // Kimenet: "012.35" (vezető nullákkal kiegészítve, 2 tizedesjegy)
const igazitottSzoveg = sprintf("%10s", "Hello"); // Kimenet: "          Hello" (jobbra igazítva, 10 szélesség)

Alkalmasság lokalizációra: Amikor karakterláncokat készítünk különböző nyelvekhez, a sprintf-hez hasonló formátumok gyakran jól integrálódnak a lokalizációs keretrendszerekkel. A karakterlánc sablon és a tényleges értékek elkülönítése megkönnyíti a fordítások kezelését. Bár maga a sprintf.js nem kezeli a teljes nemzetköziesítést (például a többes szám szabályait), kiválóan alkalmas az adatok formázására a lefordított karakterláncokon belül.

Bemutatjuk a sprintf.js-t

A Playful Sparkle sprintf.js egy jól karbantartott, könnyűsúlyú és nyílt forráskódú könyvtár, amely hűen implementálja a sprintf funkcionalitást JavaScriptben. Fantasztikus választás azoknak a fejlesztőknek, akik robusztus szövegformázási képességekre vágynak anélkül, hogy nagyobb segédkönyvtárak terhelését kellene viselniük.

npm install @playfulsparkle/sprintf-js

bower install playfulsparkle/sprintf.js

// A sprintf függvény importálása
import { sprintf } from '@playfulsparkle/sprintf-js';

const koszontes = sprintf("Hello, %s!", "World");
console.log(koszontes); // Kimenet: Hello, World!

A sprintf.js API mélyebb megismerése

A sprintf.js elsősorban két függvényt kínál: a sprintf()-et és a vsprintf()-et.

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

Ez a fő függvény. Az első argumentum egy formázó karakterlánc, amelyet a formázó karakterláncban található helyőrzőknek megfelelően a beillesztendő értékek követnek.

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

const nev = "István";
const pontszam = 95;
const uzenet = sprintf("A %s nevű tanuló %d pontot ért el.", nev, pontszam);
console.log(uzenet); // Kimenet: A István nevű tanuló 95 pontot ért el.

const pi = Math.PI;
const formazottPi = sprintf("A pi értéke megközelítőleg %.2f.", pi);
console.log(formazottPi); // Kimenet: A pi értéke megközelítőleg 3.14.

string vsprintf(string format, array argv)

Ez a függvény hasonló a sprintf()-hez, de egy argumentumokat tartalmazó tömböt fogad el egyedi argumentumok helyett. Ez különösen hasznos, ha a formázandó értékek egy tömbben vannak tárolva.

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

const adatok = ["Dávid", 88, "természettudomány"];
const uzenet = vsprintf("A %s nevű tanuló %d pontot szerzett %s tantárgyból.", adatok);
console.log(uzenet); // Kimenet: A Dávid nevű tanuló 88 pontot szerzett természettudomány tantárgyból.

A formázó karakterlánc helyőrzőinek elsajátítása

A sprintf.js ereje a formázó karakterlánc helyőrzőiben rejlik. Ezek a helyőrzők határozzák meg, hogy a megadott argumentumokat hogyan kell formázni és beilleszteni az eredményül kapott karakterláncba. A helyőrző általános szintaxisa:

%[argument_index$][flags][width][.precision]type

Bontsuk le az egyes összetevőket:

• %: A literális százalékjel, amely egy helyőrző kezdetét jelzi.
• [argument_index$] (Opcionális): Lehetővé teszi, hogy explicit módon megadja, melyik argumentumot kell használni ehhez a helyőrzőhöz. Például a %2$s a második argumentumot használná karakterláncként.
• [flags] (Opcionális): Módosítók, amelyek befolyásolják a kimenet formátumát. Gyakori flag-ek:
  • +: Numerikus típusok esetén a plusz vagy mínusz jelet kényszeríti az eredmény elé.
  • : (szóköz) Ha nem kerül kiírásra előjel, egy szóköz kerül a szám elé.
  • 0: Vezető nullákkal tölti fel a számot a megadott szélességig.
  • -: Balra igazítja az eredményt a megadott szélességen belül.
• [width] (Opcionális): Egy egész szám, amely meghatározza a kiírandó karakterek minimális számát. Ha a kimenet rövidebb ennél a számnál, akkor kiegészül (általában szóközökkel, vagy nullákkal, ha a 0 flag van használva).
• [.precision] (Opcionális): Megadja a tizedesvessző utáni számjegyek számát lebegőpontos számok esetén, vagy egy karakterlánc maximális hosszát. Egy pont (.) előzi meg.
• type (Kötelező): Egyetlen karakter, amely meghatározza a formázandó argumentum típusát. Íme egy táblázat a sprintf.js által támogatott gyakori típus specifikálókról:

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

// Argumentum index
console.log(sprintf("%2$s %1$s", "World", "Hello")); // Kimenet: Hello World

// Flag-ek
console.log(sprintf("%+d", 10));     // Kimenet: +10
console.log(sprintf("% d", 10));     // Kimenet:  10
console.log(sprintf("%05d", 5));      // Kimenet: 00005
console.log(sprintf("%-5s", "Hi"));    // Kimenet: Hi

// Szélesség
console.log(sprintf("%10s", "Test"));    // Kimenet:          Test (jobbra igazítva)
console.log(sprintf("%-10s", "Test"));   // Kimenet: Test          (balra igazítva)

// Pontosság
console.log(sprintf("%.2f", 3.14159)); // Kimenet: 3.14
console.log(sprintf("%.5s", "JavaScript")); // Kimenet: JavaS

// Opciók kombinálása
console.log(sprintf("%010.2f", 123.456)); // Kimenet: 0000123.46

A sprintf.js haladó funkcióinak kiaknázása

A sprintf.js néhány haladó funkciót kínál, amelyek tovább javíthatják a szövegformázási képességeit.

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

const keresztNev = "János";
const vezetekNev = "Kovács";
console.log(sprintf("Vezetéknév: %2$s, Keresztnév: %1$s", keresztNev, vezetekNev));
// Kimenet: Vezetéknév: Kovács, Keresztnév: János

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

const felhasznalo = { nev: "Zsuzsanna", kor: 25 };
const uzenet = sprintf("A felhasználó neve %(nev)s és %(kor)d éves.", felhasznalo);
console.log(uzenet); // Kimenet: A felhasználó neve Zsuzsanna és 25 éves.

const termek = { azonosito: "TERMEK123", ar: 49.99 };
const termekAdatok = sprintf("Termékazonosító: %(azonosito)s, Ár: $%.2f", termek);
console.log(termekAdatok); // Kimenet: Termékazonosító: TERMEK123, Ár: $49.99

A sprintf.js gyakorlati alkalmazásai

A sprintf.js hihetetlenül hasznos lehet különféle JavaScript fejlesztési forgatókönyvekben:

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

const alapUrl = "[https://api.example.com/users/%d](https://www.google.com/search?q=https://api.example.com/users/%25d)";
const felhasznaloiAzonosito = 123;
const apiUrl = sprintf(alapUrl, felhasznaloiAzonosito);
console.log(apiUrl); // Kimenet: [https://api.example.com/users/123](https://www.google.com/search?q=https://api.example.com/users/123)

const keresesUrl = "[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 lekerdezes = "javascript";
const oldalSzam = 2;
const teljesKeresesUrl = sprintf(keresesUrl, encodeURIComponent(lekerdezes), oldalSzam);
console.log(teljesKeresesUrl); // Kimenet: [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 idobelyeg = new Date().toISOString();
const szint = "HIBA";
const uzenet = "Nem sikerült csatlakozni az adatbázishoz.";
const naplouzenet = sprintf("[%s] [%s] %s", idobelyeg, szint, uzenet);
console.log(naplouzenet);
// Példa kimenet: [2025-03-27T00:19:50.000Z] [HIBA] Nem sikerült csatlakozni az adatbázishoz.

Támogatás és kompatibilitás

A sprintf.js-t úgy tervezték, hogy nagymértékben kompatibilis legyen a különböző JavaScript környezetekkel. A GitHub repozitórium szerint:

• Node.js: Zökkenőmentesen működik a modern Node.js verziókkal.
• Böngészők: Kompatibilis a legtöbb modern webböngészővel. A repozitórium tartalmaz egy böngészőtámogatási táblázatot, amelyet érdemes megtekinteni a támogatott verziókkal kapcsolatos konkrét részletekért. Általánosságban kompatibilis a következőkkel:
  • Chrome
  • Firefox
  • Safari
  • Edge
  • Internet Explorer (a támogatott verziókért tekintse meg a táblázatot)

Régebbi böngészők esetén, amelyek esetleg nem rendelkeznek bizonyos JavaScript funkciókkal, szükség lehet polyfill-ek beillesztésére a teljes kompatibilitás biztosításához. A legtöbb modern fejlesztői környezetben azonban a sprintf.js azonnal működnie kell.

Következtetés

A szövegformázás kulcsfontosságú készség a szoftverfejlesztők számára, és a sprintf metódus hatékony és olvasható módot kínál a szövegkimenet pontos vezérlésére. A Playful Sparkle sprintf.js könyvtára ezt a széles körben elterjedt szabványt hozza el a JavaScript világába, könnyűsúlyú és hatékony megoldást nyújtva azoknak a fejlesztőknek, akik robusztus szövegformázási képességekre vágynak. A formázó karakterlánc helyőrzőinek elsajátításával és a könyvtár API-jának megértésével jelentősen javíthatja a JavaScript kódjának áttekinthetőségét és karbantarthatóságát.

Javasoljuk, hogy tekintse meg a sprintf.js könyvtárat a GitHub repozitóriumában: https://github.com/playfulsparkle/sprintf.js (új ablakban nyílik meg).

Kérdések