Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. ES6
Code

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

by
Difficulty:IntermediateLength:MediumLanguages:
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 е ОК за следните два примера по долу които правят едно и също:

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

В много редки случаи трябва да ескейпнете (избегнете) вече използвани единични кавички в 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. Примера:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Заключение

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

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

Повече практически статии за 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:

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

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.