Selles õpetuses saate näidete abil õppida JavaScripti malliliite (mallistringid).
Malli literaalid (mallistringid) võimaldavad kasutada stringi või manustatud väljendeid stringi kujul. Need on suletud tagumikesse ``. Näiteks,
const name = 'Jack'; console.log(`Hello $(name)!`); // Hello Jack!
Märkus . Malli literaal võeti kasutusele 2015. aastal (tuntud ka kui ECMAScript 6 või ES6 või ECMAScript 2015). Mõni brauser ei pruugi malli literaalide kasutamist toetada. Lisateabe saamiseks külastage JavaScripti malli sõnasõnalist tuge.
Mallisõnalised stringid
JavaScripti varasemates versioonides kasutaksite stringide jaoks ühte ''või topeltpakkumist "". Näiteks,
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
Samade jutumärkide kasutamiseks stringi sees saate kasutada põgenemismärki .
// escape characters using const str3 = 'A \'quote\' inside a string'; // valid code const str5 = "Another "quote " inside a string"; // valid code
Põgenemismärkide asemel võite kasutada malli literaale. Näiteks,
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`;
Nagu näete, ei võimalda malli literaalid mitte ainult hõlpsalt pakkumisi lisada, vaid muudavad ka meie koodi puhtamaks.
Mitmerealised stringid malli liitrite abil
Malli literaalid muudavad ka mitmerealiste stringide kirjutamise lihtsaks. Näiteks,
Malli literaalide abil saate asendada
// using the + operator const message1 = 'This is a long message' + 'that spans across multiple lines' + 'in the code.' console.log(message1)
koos
const message1 = `This is a long message that spans across multiple lines in the code.` console.log(message1)
Mõlema programmi väljund on sama.
See on pikk sõnum, mis ulatub koodis üle mitme rea.
Avaldise interpoleerimine
Enne JavaScripti ES6 kasutaksite +operaatorit stringide muutujate ja avaldiste liitmiseks. Näiteks,
const name = 'Jack'; console.log('Hello ' + name); // Hello Jack
Malli literaalide abil on muutujate ja avaldiste lisamine stringi veidi lihtsam. Selleks kasutame $(… )süntaksit.
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')`)
Väljund
Tere Jack 4 + 5 summa on 9 väga kõrge
Malli literaali sees olevate muutujate ja avaldiste määramise protsessi nimetatakse interpoleerimiseks.
Sildiga mallid
Tavaliselt kasutaksite argumentide edastamiseks funktsiooni. Näiteks,
function tagExample(strings) ( return strings; ) // passing argument const result = tagExample('Hello Jack'); console.log(result);
Malli literaalide abil saate siiski luua sildistatud mallid (mis käituvad nagu funktsioon). Kasutate silte, mis võimaldavad teil analüüsida malli literaale funktsiooniga.
Sildiga mall on kirjutatud nagu funktsiooni määratlus. Sõna otsesõnaliseks ()nimetades ei saa te aga sulgudest läbi. Näiteks,
function tagExample(strings) ( return strings; ) // creating tagged template const result = tagExample`Hello Jack`; console.log(result);
Väljund
("Tere Jack")
Stringi väärtuste massiiv edastatakse sildifunktsiooni esimese argumendina. Ülejäänud argumentidena võite edastada ka väärtused ja väljendid. Näiteks,
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);
Väljund
Tere Jack, kuidas sul läheb?
Nii saate märgitud temaplaadis edastada ka mitu argumenti.
