Ebben az oktatóanyagban példák segítségével megismerheti a JavaScript sablonszövegeket (sablonhúrok).
A sablon literálok (sablon húrok) lehetővé teszik, hogy karakterláncokat vagy beágyazott kifejezéseket használjon karakterlánc formájában. Háttérbe vannak zárva ``. Például,
const name = 'Jack'; console.log(`Hello $(name)!`); // Hello Jack!
Megjegyzés : A sablon literál 2015-ben került bevezetésre (más néven ECMAScript 6 vagy ES6 vagy ECMAScript 2015). Egyes böngészők nem támogatják a sablon literálok használatát. További információkért keresse fel a JavaScript Template Literal támogatást.
Sablon literálok húrokhoz
A JavaScript korábbi verzióiban egyetlen ''vagy kettős idézetet használjon ""a karakterláncokhoz. Például,
const str1 = 'This is a string'; // cannot use the same quotes const str2 = 'A "quote" inside a string'; // valid code const str3 = 'A 'quote' inside a string'; // Error const str4 = "Another 'quote' inside a string"; // valid code const str5 = "Another "quote" inside a string"; // Error
Ha ugyanazokat az idézeteket szeretné használni a karakterláncban, használhatja a escape karaktert .
// escape characters using const str3 = 'A \'quote\' inside a string'; // valid code const str5 = "Another "quote " inside a string"; // valid code
A menekülési karakterek helyett a sablon literálokat is használhatja. Például,
const str1 = `This is a string`; const str2 = `This is a string with a 'quote' in it`; const str3 = `This is a string with a "double quote" in it`;
Amint láthatja, a sablon literálok nemcsak megkönnyítik az idézetek felvételét, hanem a kódunkat is tisztábbá teszik.
Többsoros húrok sablon literálok használatával
A sablon literálok megkönnyítik a többsoros húrok írását is. Például,
A sablon literálok használatával kicserélheti
// using the + operator const message1 = 'This is a long message' + 'that spans across multiple lines' + 'in the code.' console.log(message1)
val vel
const message1 = `This is a long message that spans across multiple lines in the code.` console.log(message1)
Mindkét program kimenete azonos lesz.
Ez egy hosszú üzenet, amely a sor több során átível.
Kifejezés-interpoláció
A JavaScript ES6 előtt az +operátort használná a változók és kifejezések összefűzésére egy karakterláncban. Például,
const name = 'Jack'; console.log('Hello ' + name); // Hello Jack
A sablon literálokkal kissé könnyebb változókat és kifejezéseket beilleszteni egy karakterláncba. Ehhez használjuk a $(… )szintaxist.
const name = 'Jack'; console.log(`Hello $(name)`); // template literals used with expressions const result = `The sum of 4 + 5 is $(4 + 5)`; console.log(result); console.log(`$(result < 10 ? 'Too low': 'Very high')`)
Kimenet
Hello Jack A 4 + 5 összege 9 Nagyon magas
A változók és kifejezések kiosztásának folyamata a sablon literál belsejében interpoláció néven ismert.
Címkézett sablonok
Normál esetben egy függvényt használ az argumentumok átadásához. Például,
function tagExample(strings) ( return strings; ) // passing argument const result = tagExample('Hello Jack'); console.log(result);
Létrehozhat azonban címkézett sablonokat (amelyek funkcióként viselkednek) sablon literálok segítségével. Olyan címkéket használ, amelyek lehetővé teszik a sablon literálok elemzését egy funkcióval.
A címkézett sablon úgy van megírva, mint egy funkciódefiníció. A ()szó szoros értelmében azonban nem ad be zárójeleket . Például,
function tagExample(strings) ( return strings; ) // creating tagged template const result = tagExample`Hello Jack`; console.log(result);
Kimenet
("Hello Jack")
A karakterlánc-tömböt egy címkefüggvény első argumentumaként adják át. A fennmaradó érvekként átadhatja az értékeket és kifejezéseket is. Például,
const name = 'Jack'; const greet = true; function tagExample(strings, nameValue) ( let str0 = strings(0); // Hello let str1 = strings(1); // , How are you? if(greet) ( return `$(str0)$(nameValue)$(str1)`; ) ) // creating tagged literal // passing argument name const result = tagExample`Hello $(name), How are you?`; console.log(result);
Kimenet
Hello Jack, hogy vagy?
Ily módon több argumentumot is átadhat a címkézett temaplate-ben.
