Tässä opetusohjelmassa opit JavaScript-mallikirjastoista (mallimerkkijonot) esimerkkien avulla.
Mallilitraalien (mallijonojen) avulla voit käyttää merkkijonoja tai upotettuja lausekkeita merkkijonon muodossa. Ne on suljettu takaosiin ``. Esimerkiksi,
const name = 'Jack'; console.log(`Hello $(name)!`); // Hello Jack!
Huomautus : Template literal otettiin käyttöön vuonna 2015 (tunnetaan myös nimellä ECMAScript 6 tai ES6 tai ECMAScript 2015). Jotkin selaimet eivät välttämättä tue mallilitraalien käyttöä. Lisätietoja on JavaScript-mallin kirjaimellisessa tuessa.
Template Literals for Strings
Aikaisemmissa JavaScript-versioissa merkkijonoihin käytettiin yhtä ''tai kahta lainausta "". Esimerkiksi,
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
Jos haluat käyttää samoja lainauksia merkkijonossa, voit käyttää pakomerkkiä .
// escape characters using const str3 = 'A \'quote\' inside a string'; // valid code const str5 = "Another "quote " inside a string"; // valid code
Voit käyttää pakomerkkejä sen sijaan, että kirjoitat kirjainmalleja. Esimerkiksi,
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`;
Kuten näette, malli literaalit helpottavat tarjousten lisäämistä ja tekevät koodistamme myös puhtaamman.
Moniriviset merkkijonot, jotka käyttävät mallikirjaimia
Malli-literaalit helpottavat myös monirivisten merkkijonojen kirjoittamista. Esimerkiksi,
Käyttämällä malli literaaleja, voit korvata ne
// using the + operator const message1 = 'This is a long message' + 'that spans across multiple lines' + 'in the code.' console.log(message1)
kanssa
const message1 = `This is a long message that spans across multiple lines in the code.` console.log(message1)
Molempien ohjelmien tulos on sama.
Tämä on pitkä viesti, joka kattaa koodin useita rivejä.
Lausekkeen interpolointi
Ennen JavaScripti ES6: ta sinun tulisi +operaattorilla ketjuttaa muuttujia ja lausekkeita merkkijonossa. Esimerkiksi,
const name = 'Jack'; console.log('Hello ' + name); // Hello Jack
Mallilitraalien avulla muuttujia ja lausekkeita on hieman helpompi sisällyttää merkkijonoon. Tätä varten käytämme $(… )syntaksia.
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')`)
Tuotos
Hello Jack Summa 4 + 5 on 9 Erittäin korkea
Muuttujien ja lausekkeiden osoittamisprosessi mallin literaalin sisällä tunnetaan interpolaationa.
Merkityt mallit
Normaalisti käyttäisit funktiota argumenttien välittämiseen. Esimerkiksi,
function tagExample(strings) ( return strings; ) // passing argument const result = tagExample('Hello Jack'); console.log(result);
Voit kuitenkin luoda koodattuja malleja (jotka käyttäytyvät funktiona) mallipohjan literaaleilla. Käytät tunnisteita, joiden avulla voit jäsentää mallin literaaleja funktiolla.
Merkitty malli kirjoitetaan kuten funktion määrittely. Et kuitenkaan välitä sulkeita ()kutsuttaessasi kirjainta. Esimerkiksi,
function tagExample(strings) ( return strings; ) // creating tagged template const result = tagExample`Hello Jack`; console.log(result);
Tuotos
("Hei Jack")
Merkkijonoarvojen taulukko välitetään tag-funktion ensimmäisenä argumenttina. Voit myös välittää arvot ja lausekkeet jäljellä olevina argumentteina. Esimerkiksi,
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);
Tuotos
Hei Jack, kuinka voit?
Tällä tavalla voit myös välittää useita argumentteja tagged temaplate.
