Hogyan használjuk az ES6 sablon-írást a JavaScript-ben
A programozásban a kifejezés “szó szerinti” utal a értékek jelölése kódban. Például egy karakterlánc értéket jelölünk az a-val karakterlánc amelyek kettős vagy egyéni idézetekben vannak elhelyezve ("Foo", 'bár', "Ez egy karakterlánc!").
Sablon literálok bevezetésre kerültek ECMAScript 6. Hasonlóan működnek a karakterláncokhoz; termelnek sablon értékek és nyers sablon értékek, mindkettő karakterlánc.
A string literáloktól eltérően azonban a sablon-literálok olyan értékeket hozhatnak létre, amelyek többsoros húrok, amit csak egy karakterláncban érhet el új sor karakterek hozzáadása (\ n) hozzá.
Sablon literálok is húzás létrehozása más értékekkel (amelyek kifejezésekből származnak), amelyekre a felhasználót kell használni plusz operátor karakterláncban ("az Ön azonosítója:" + idNo; hol ID NO egy változó kifejezés numerikus értékkel).
Mindezek a tulajdonságok a sablon-literálokat előnyösebbek karakterlánc értékek létrehozása.
A sablon literálok szintaxisa
A sablon literális határolója a végrehajtóoperátor ' karakter (más néven backquote karakter vagy súlyos akcentus szimbólum). Egy kifejezés a szóközben (amelynek értéke az a futási idő alatt a szó szerinti) által előállított végleges értékben szerepel göndör nadrágtartó val,-vel előző dollárjel $.
'string $ someExpression több karakterlánc
Itt van néhány példák a sablon literálokra termelő változatlan, szubsztituált (kifejezések helyébe az értékelt értékek), és többsoros húrok.
console.log ( 'hello'); // hello var name = "Joan"; console.log ('hello $ name'); // hello Joan console.log („Kedves Joan, Üdvözöljük!”); // Kedves Joan, // Üdvözöljük. Menekülő és nyers sablon értékek
Egy sablonban a ' (Végrehajtóoperátor), \ (backslash), és $ (dollárjel) karakterek el kell menekülni használni a menekülési karakter \ ha azokat a sablon értékükbe kell belefoglalni.
Alapértelmezés szerint a sablonban szereplő összes menekülési szekvencia figyelmen kívül hagyja. Ha azt szeretné, hogy belefoglalja a kimenetbe, használnia kell azt nyers sablon érték.
console.log ('inline code in markup: kód'); // inline kód a jelölésben: 'code' var name = "Joan"; console.log ('hello $ name.'); / hello $ name. console.log (String.raw'hello $ name. '); // hello. A String.raw eljárás nyers sablon értékeket ad ki (a sablon szöveges sztringje). A fenti kódban a nyers metódusnak nevezik “címkézett sablon”.
Címkézett sablonok
A címkézett sablon a funkcióhívás hol, a szokásos zárójelek helyett (opcionális paraméterekkel) a függvény neve mellett, van egy sablon szó ahonnan a függvény megkapja az érveit.
Tehát ahelyett, hogy egy ilyen függvényt hívna:
ize (ArgumentsForFoo);
Ezt úgy hívják:
foo'ATemplateStringProvidingArgumentsForFoo ';
A funkció ize az úgynevezett a címke funkció. Az első argumentum, amelyet a sablon literálból kapott, egy sor hívta a sablon objektum.
A sablonobjektum (tömb) tart minden karakterlánc értéket a sablon szó szerinti értelmezése és a nyers tulajdonság (másik tömb) az összes nyers (nem menekülő) karakterlánc érték értelmezhető ugyanabból a szóból.
A sablonobjektumot követve a címkefunkció argumentumai közé tartozik mind a értékelték külső értékek a szóban forgó szóban (a göndör nadrágtartókban találhatóak) $ ).
Az alábbi kódban a ize függvény létrehozása érveléseit. Ezután a függvényt hívják a címkézett sablonmodellben, két kifejezést hordozó sablonnal (név és id).
var name = "John"; var id = 478; foo'hello $ name. az Ön azonosítója: $ id. '; foo () console.log (argumentumok [0]); // Array ["hello", "az Ön azonosítója:", "." ] console.log (argumentumok [1]); // John console.log (argumentumok [2]); // 478
Az első argumentum az sablon objektum a sablon literáljából értelmezett összes karakterláncot a második és a harmadik érv a értékeket a kifejezések, név és id.
A nyers ingatlan
Mint korábban említettük, a sablonobjektum a a hívott ingatlan nyers amely egy tömböt tartalmaz az összes nyers (nem menekülő) karakterlánc érték a sablon szó szerinti értelmezése. Így férhet hozzá a nyers ingatlan:
var name1 = "John", név2 = "Joan"; foo'hello $ name1, $ name2, hogyan vagy? foo () console.log (argumentumok [0]); // Array ["hello $ name1,", ", hogyan vagy mindkettő?"] Console.log (argumentumok [0] .raw); // Array ["hello $ name1,", ", hogyan vagy mindkettő?"] Console.log (argumentumok [1]); // Joan
Címkézett sablonok használata
A címkézett sablonok hasznosak lehetnek szakítsa meg a karakterláncot különálló részekbe, például gyakran egy URL-be, vagy egy nyelv értelmezése közben. Talál egy gyűjteményt címkézett sablon példák itt.
Az IE kivételével a sablon literálok minden nagyobb böngészőben támogatott.
Az alábbiakban találhat néhány példát a címkefunkciókhoz különböző aláírások amelyek az érveket képviselik:
var name = "John"; foo'hello $ name, hogyan vagy? bar'hello $ name, hogyan vagy? foo függvény (… args) console.log (args); // Array [Array ["hello", ", hogyan vagy mindkettő?"], "John"] funkciósáv (strVals,… exprVals) console.log (strVals); // Array ["hello", "hogyan vagy mindketten?" ] console.log (exprVals); // Array ["John"]
Ban,-ben bár funkció, az első paraméter (strVals) az a sablon objektum és a második (az elterjedt szintaxist használó) egy tömb, amely összegyűlt az összes kiértékelt értéket a függvényhez továbbított sablon-írástól.
Helyezze össze a karakterláncot
Ha akarod az egész mondatot a címkefunkció belsejében található, összevonja az összes értéket a sablonstringeket hordozó tömbök és az értékelt expressziós értékek. Mint ez:
foo (strs,… exprs) // ha vannak olyan kifejezések, amelyek a szó szerinti kifejezésben szerepelnek, ha (exprs.length! == 0) var n = strs.length - 1, eredmény = "; mert (var i = 0 i < n; i++) result += strs[i] + exprs[i]; result += strs[n]; console.log(result); //"Hello John." // if there are no expressions included in the literal else console.log(strs[0]); name = 'John'; foo'Hello $name.';
A STR tömb tart az összes karakterlánc a szó szerinti és exprs tart az összes kiértékelt értéket a szó szerinti.
Ha még egy kifejezésérték is létezik, akkor az egyes tömbértékek összeadódnak STR (az utolsó kivételével) azonos indexszámú értékkel exprs. Ezután a végén adja hozzá a STR tömb az összekapcsolt karakterlánchoz, teljes mondatot alkot Ily módon.
