Смисълът в темплейтните стрингове в ES6

Sponsored Content

This sponsored post features a product relevant to our readers while meeting our editorial guidelines for being objective and educational.

Bulgarian (Български) translation by Stoyan Germanov (you can also view the original English article)

ES6 е бъдещето на JavaScript и то вече е тук. Нейната спецификация е вече завършена и има множество нововъведения в езика, които са задължителни за да може езика да е конкурентоспособен в модерната уеб разработка. Не всичко от ES6 е за ползване веднага, но тази серия от публикации ще ви покаже някои от полезните и вече използваеми новости в езика.

Ако се в гледате в JavaScript кода който автора е написал по на долу. Ще забележите, че той винаги ползва единични кавички за стрингове (низове) вместо двойните такива. JavaScript е ОК за следните два примера по долу които правят едно и също:

var animal = "cow";
var animal = 'cow';

Причината автора да ползва единични кавички е следната: Много по лесно е да се съберат HTML тагове като стринг с нужните им двойни кавички за стойностите на атрибутите им.

// with single quotes, there's no need to 
// escape the quotes around the class value
var but = '<button class="big">Save</button>';

// this is a syntax error:
var but = "<button class="big">Save</button>";

// this works:
var but = "<button class=\"big\">Save</button>";

В много редки случаи трябва да ескейпнете (избегнете) вече използвани единични кавички в HTML кода, като например цитати в даден текст. Други редки случаи в които може дави се наложи е да сте ползвали в самата страница JavaScript или CSS (инлайн) когато сте принудени от обстоятелствата за това. Дори и да имате цитати е по вероятно да използвате другите кавички които са типографски по приятни за очите.

Разбира се HTML позволява да пропускате кавички, както и да ползвате единички и модерните браузери ще се справят с това. За предпочитане все пак е да не се осланяме на тази възможност. HTML5 е създаден доста либерален към грешки, заради лошото писане от страна на разработчиците в миналото, но това не значи че за напред трябва да пишем такъв код.

През дните на писане на DHTML с помощта на document.write, създаване на документи вътре във frameset и на нови изчакащи прозорци вътре и други подобни глупости, вече ни карат да не искаме да повторим същите грешки от тогава. Имаше времена в които се нуждаехме и от тройни, по времето когато нямаше добро цветово кодиране в редакторите. Всичко бе една каша.

Заместване в стринг с регулярен израз?

Друга причина автора да предпочита единични кавички е, че дълго време е писал PHP за големи сайтове, в които производителността е от голямо значение. В PHP разликата между двете кавички е очевадна. Може да забележите разликата по долу. (нищо съществено за урока) That meant back in the days of PHP 3 and 4 that using single quotes was much faster, as the parser didn’t have to go through the string to substitute values. Примера:

<?php
  $animal = 'cow';
  $sound = 'moo';
 
  echo 'The animal is $animal and its sound is $sound';
  // => The animal is $animal and its sound is $sound
 
  echo "The animal is $animal and its sound is $sound";
  // => The animal is cow and its sound is moo
?>

В JavaScript няма същата особеност показана по горе, за това за да постигнем същия ефект показан в кода по горе, трябва да свържем стринговете, както е показано тук: Това е доста тромав начин, за да се свърши тази работа.

var animal = 'cow';
var sound = 'moo';

alert('The animal is ' + animal + ' and its sound is ' +
 sound);
// => "The animal is cow and its sound is moo"

Многоредовата каша

Нещата стават наистина разхвърляни с по дълги стрингове под формата на четим HTML. Вероятно ако имате добър редактор, той ще се оплаче за празника след вашия "+" в края на редовете (по лошо е ако не го направи). Проблема се основава на това че JavaScript няма многоредови стрингове (все още).

// this doesn't work
var list = '<ul>
  <li>Buy Milk</li>
  <li>Be kind to Pandas</li>
  <li>Forget about Dre</li>
</ul>';
 
// This does, but urgh… 
var list = '<ul>\
  <li>Buy Milk</li>\
  <li>Be kind to Pandas</li>\
  <li>Forget about Dre</li>\
</ul>';
 
// This is the most common way, and urgh, too…
var list = '<ul>' +
'  <li>Buy Milk</li>' +
'  <li>Be kind to Pandas</li>' +
'  <li>Forget about Dre</li>' +
'</ul>';

Решението: темплейт за клиентската част

За да се справим с бъркотиите пти писане на стрингове и конкатенирането им решението е едно, то винаги се е ползвало в ползването на библиотеки. Има множество HTML темплейтни библиотеки, Mustache.js е една от тях Всички те обаче следват не стандартизирани синтактични решения, които са изникнали в ума на авторите им. Това е все едно да пишете своето съдържание в Markdown и после да разберете, че има много различни дефиниции за "Markdown".

Въведение в темплейтния стринг

С влизането на ES6 вече може да се похвалим с нов инструмент за работа със стринговете в темплейти: Template Strings. Поддръжката темплейтни стрингове в момента се ограничава до следните браузери: Chrome 44+, Firefox 38+, Microsoft Edge и всички нови браузери на основата на WebKit Safari за съжаление няма достатъчна поддръжка, но се очаква в скоро време.

Уникалното на темплейтните стrингове е, че ползва нов разделител който не се ползва в HTML и дори в нормалния текст (`). (най често на клавиатурата е в ляво от числото едно (1), в същия бутон за тилда (~))

Използвайки го вече имаме стринг замяна в JavaScript:

var animal = 'cow';
var sound = 'moo';
 
alert(`The animal is ${animal} and its sound is ${sound}`);
// => "The animal is cow and its sound is moo"

А конструкцията ${} може да приема всяка JavaScript конструкция която връща стойност. Вие можете например да правите калкулации, или да достъпите свойство на обект:

var out = `ten times two totally is ${ 10 * 2 }`;
// => "ten times two totally is 20"
 
var animal = {
  name: 'cow',
  ilk: 'bovine',
  front: 'moo',
  back: 'milk',
}
alert(`
  The ${animal.name} is of the 
  ${animal.ilk} ilk, 
  one end is for the ${animal.front}, 
  the other for the ${animal.back}
`);
// => 
/*
  The cow is of the 
  bovine ilk, 
  one end is for the moo, 
  the other for the milk
*/

В следващият пример може да видите, че многоредовият стринг вече не е проблем.

Етикетирани (тагнати) темплейти

Следващото нещо което може да правите е да подготвите нещо като функция, която получава низ като параметър. Примерно вие можете да кодирате стринг от адрес без да се налага постоянно да ползвате encodeURIComponent.

function urlify (str) {
  return encodeURIComponent(str);
}
 
urlify `http://beedogs.com`;
// => "http%3A%2F%2Fbeedogs.com"
urlify `woah$£$%£^$"`;
// => "woah%24%C2%A3%24%25%C2%A3%5E%24%22"
 
// nesting also works:
 
var str = `foo ${urlify `&&`} bar`;
// => "foo %26%26 bar"

Това работи, но ползва преминаването от масив до стринг. Параметъра дава на функцията на стринг а масив от стрингове и стойности. Примера показва по този начин за удобство е до стринг, но правилният е да достъпвате членовете на масива.

Достъп до стрингове и стойности вътре в темплейт

Вътре в таг функцията може да достъпите не само целия стринг, но и отделни негови части:

function tag (strings, values) {
  console.log(strings);
  console.log(values);
  console.log(strings[1]);
}
tag `you ${3+4} it`;
/* =>
 
Array [ "you ", " it" ]
7
it
 
*/

Те също са в масив и може да достъпите дори и специалните знаци: Така, за примера добавяме един специален знак за нов ред \n. Вие ще получите двоен интервал в стинга, но и \n в суров вид:

function tag (strings, values) {
  console.log(strings);
  console.log(values);
  console.log(strings[1]);
  console.log(string.raw[1]);
}
 
tag `you ${3+4} \nit`;
/* =>
 
Array [ "you ", "  it" ]
7
 
it
 \nit
*/

Заключение

Темплейтните стрингове са едни от малко удобства в ES6, които може да се използват и в момента. Ако имате да поддържате и по-стари браузъри, можете да ползвате transpile ES6 за ES5; Можете да направите тест на функция за шаблон чрез библиотека като featuretests.io или със следния код:

var templatestrings = false;
try {
  new Function( "`{2+2}`" );
  templatestrings = true;
} catch (err) {
  templatestrings = false;
} 
 
if (templatestrings) {
    // …
}

Ето още няколко статии за темплейтни низове:

Повече практически статии за JavaScript

This article is part of the web development series from Microsoft tech evangelists on practical JavaScript learning, open-source projects, and interoperability best practices, including Microsoft Edge browser and the new EdgeHTML rendering engine.

We encourage you to test across browsers and devices including Microsoft Edge—the default browser for Windows 10—with free tools on dev.modern.IE:

In-depth tech learning on Microsoft Edge and the Web Platform from our engineers and evangelists:

Microsoft Edge Web Summit 2015 (what to expect with the new browser, new supported web platform standards, and guest speakers from the JavaScript community)
Woah, I Can Test Edge & IE on a Mac & Linux! (from Rey Bango)
Advancing JavaScript Without Breaking the Web (from Christian Heilmann)
The Edge Rendering Engine That Makes the Web Just Work (from Jacob Rossi)
Unleash 3D Rendering With WebGL (from David Catuhe including the Vorlon.js and Babylon.js projects)
Hosted Web Apps and Web Platform Innovations (from Kevin Hill and Kiril Seksenov including the manifoldJS project)

More free cross-platform tools and resources for the Web Platform: