JavaScript veidņu literāļi (veidņu virknes)

Satura rādītājs

Veidņu literāļi stīgām
Daudzrindu virknes, izmantojot veidņu literāļus
Izteiksmes interpolācija
Atzīmētās veidnes

Šajā apmācībā jūs uzzināsit par JavaScript veidņu literāļiem (veidņu virknēm), izmantojot piemērus.

Veidņu literāļi (veidņu virknes) ļauj izmantot virknes vai iegultas izteiksmes virknes formā. Tie ir slēgti aizmugurē ``. Piemēram,

 const name = 'Jack'; console.log(`Hello $(name)!`); // Hello Jack!

Piezīme . Veidnes burtnīca tika ieviesta 2015. gadā (pazīstama arī kā ECMAScript 6 vai ES6 vai ECMAScript 2015). Dažas pārlūkprogrammas var neatbalstīt veidņu literāļu izmantošanu. Apmeklējiet JavaScript veidnes literālo atbalstu, lai uzzinātu vairāk.

Veidņu literāļi stīgām

Iepriekšējās JavaScript versijās virknēm izmantosiet vienu ''vai divkāršu citātu "". Piemēram,

 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

Lai virknē izmantotu tās pašas pēdiņas, varat izmantot evakuācijas rakstzīmi .

 // escape characters using const str3 = 'A \'quote\' inside a string'; // valid code const str5 = "Another "quote " inside a string"; // valid code

Bēgšanas rakstzīmju vietā varat izmantot veidņu literāļus. Piemēram,

 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`;

Kā redzat, veidņu literāļi ne tikai atvieglo citātu iekļaušanu, bet arī padara mūsu kodu tīrāku.

Daudzrindu virknes, izmantojot veidņu literāļus

Veidņu literāļi arī atvieglo daudzrindu virkņu rakstīšanu. Piemēram,

Izmantojot veidņu literāļus, jūs varat aizstāt

 // using the + operator const message1 = 'This is a long message' + 'that spans across multiple lines' + 'in the code.' console.log(message1)

 const message1 = `This is a long message that spans across multiple lines in the code.` console.log(message1)

Abu šo programmu rezultāts būs vienāds.

 Šis ir garš ziņojums, kas kodā pārsniedz vairākas rindiņas.

Izteiksmes interpolācija

Pirms JavaScript ES6, jūs izmantosiet +operatoru, lai savienotu mainīgos un izteicienus virknē. Piemēram,

 const name = 'Jack'; console.log('Hello ' + name); // Hello Jack

Izmantojot veidņu literāļus, ir nedaudz vieglāk iekļaut mainīgos un izteicienus virknē. Tam mēs izmantojam $(… )sintaksi.

 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')`)

Rezultāts

 Sveiks Džeks 4 + 5 summa ir 9 Ļoti augsta

Mainīgo un izteicienu piešķiršanas process veidnes burtnīcā ir pazīstams kā interpolācija.

Atzīmētās veidnes

Parasti argumentu nodošanai jūs izmantojat funkciju. Piemēram,

 function tagExample(strings) ( return strings; ) // passing argument const result = tagExample('Hello Jack'); console.log(result);

Tomēr jūs varat izveidot iezīmētas veidnes (kas darbojas kā funkcija), izmantojot veidņu literālus. Jūs izmantojat tagus, kas ļauj parsēt veidnes literāļus ar funkciju.

Atzīmētā veidne ir rakstīta kā funkcijas definīcija. Tomēr, ()izsaucot burtnieku , jūs neizlaižat iekavas . Piemēram,

 function tagExample(strings) ( return strings; ) // creating tagged template const result = tagExample`Hello Jack`; console.log(result);

Rezultāts

 ("Sveiks Džek")

Virknes vērtību masīvs tiek nodots kā tagu funkcijas pirmais arguments. Jūs varētu arī nodot vērtības un izteicienus kā atlikušos argumentus. Piemēram,

 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);

Rezultāts