У овом упутству ћете научити о ЈаваСцрипт Темплате Литералс (Темплате Стрингс) уз помоћ примера.
Литерал предложака (низови шаблона) омогућавају вам употребу низова или уграђених израза у облику низа. Затворени су у повратне знакове ``. На пример,
const name = 'Jack'; console.log(`Hello $(name)!`); // Hello Jack!
Напомена : Образац шаблона уведен је 2015. године (познат и као ЕЦМАСцрипт 6 или ЕС6 или ЕЦМАСцрипт 2015). Неки прегледачи можда не подржавају употребу литерала шаблона. Посетите ЈаваСцрипт Темплате Литерал подршку да бисте сазнали више.
Образац шаблона за жице
У ранијим верзијама ЈаваСцрипт- ''а ""за низове бисте користили један наводник или двоструки наводник . На пример,
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
Да бисте користили исте цитате унутар низа, можете користити знак за излаз .
// escape characters using const str3 = 'A \'quote\' inside a string'; // valid code const str5 = "Another "quote " inside a string"; // valid code
Уместо да користите излазне знакове, можете да користите литерал шаблона. На пример,
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`;
Као што видите, шаблонски литерали не само да олакшавају укључивање цитата, већ и чине наш код чистијим.
Вишередне жице помоћу шаблона за литературу
Литерали предложака такође олакшавају писање вишередних низова. На пример,
Користећи шаблон литерале можете заменити
// 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)
Резултат оба ова програма биће исти.
Ово је дугачка порука која се протеже кроз више линија у коду.
Интерполација израза
Пре ЈаваСцрипт ЕС6, користили бисте +оператор за спајање променљивих и израза у низ. На пример,
const name = 'Jack'; console.log('Hello ' + name); // Hello Jack
Са шаблонским литералима је мало лакше укључити променљиве и изразе унутар низа. За то користимо $(… )синтаксу.
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')`)
Оутпут
Здраво Џек Збир 4 + 5 је 9 Веома висок
Процес додељивања променљивих и израза унутар литерала предлошка познат је под називом интерполација.
Таггед Темплатес
Обично бисте користили функцију за прослеђивање аргумената. На пример,
function tagExample(strings) ( return strings; ) // passing argument const result = tagExample('Hello Jack'); console.log(result);
Међутим, можете креирати означене предлошке (који се понашају као функције) помоћу литералних предложака. Користите ознаке које вам омогућавају да рашчланите литерал предложака са функцијом.
Означени предложак написан је као дефиниција функције. Међутим, не ()позивате заграде када позивате дословно. На пример,
function tagExample(strings) ( return strings; ) // creating tagged template const result = tagExample`Hello Jack`; console.log(result);
Оутпут
("Здраво Јацк")
Низ вредности вредности прослеђује се као први аргумент функције ознаке. Вредности и изразе можете такође проследити као преостале аргументе. На пример,
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);
Оутпут
Здраво Јацк, како си?
На тај начин такође можете проследити више аргумената у означену тему.
