Сборка от 17 марта 2017 г

Строки‑шаблоны

Добавлен новый вид кавычек для строк:

let str = `обратные кавычки`;

Основные отличия от двойных "…" и одинарных '…' кавычек:

• В них разрешён перевод строки.

Например:

alert(`моя многострочная строка`);

Заметим, что пробелы и, собственно, перевод строки также входят в строку, и будут выведены.

• Можно вставлять выражения при помощи ${…} .

Например:

'use strict'; let apples = 2; let oranges = 3;

alert(`${apples} + ${oranges} = ${apples + oranges}`); // 2 + 3 = 5

Как видно, при помощи ${…} можно вставлять как и значение переменной ${apples} , так и более сложные выражения, которые могут включать в себя операторы, вызовы функций и т.п. Такую вставку называют «интерполяцией».

Функции шаблонизации

Можно использовать свою функцию шаблонизации для строк. Название этой функции ставится перед первой обратной кавычкой:

let str = func`моя строка`;

Эта функция будет автоматически вызвана и получит в качестве аргументов строку, разбитую по вхождениям параметров ${…} и сами эти параметры. Например:

'use strict';

function f(strings, ...values) {

alert(JSON.stringify(strings)); // ["Sum of "," + "," =\n ","!"]
alert(JSON.stringify(strings.raw)); // ["Sum of "," + "," =\\n ","!"] alert(JSON.stringify(values)); // [3,5,8]
}

let apples = 3; let oranges = 5;

// | s[0] | v[0] |s[1]| v[1] |s[2] | v[2] |s[3] let str = f`Sum of ${apples} + ${oranges} =\n ${apples + oranges}!`;

В примере выше видно, что строка разбивается по очереди на части: «кусок строки» – «параметр» – «кусок строки» – «параметр».

• 
  Участки строки идут в первый аргумент‑массив strings .
  
• 
  У этого массива есть дополнительное свойство strings.raw . В нём находятся строки в точности как в оригинале. Это влияет на спец‑символы, например в strings символ \n – это перевод строки, а в strings.raw – это именно два символа \n .
  
• 
  Дальнейший список аргументов функции шаблонизации – это значения выражений в ${...} , в данном случае их три.
  

Как видно, функция имеет доступ ко всему: к выражениям, к участкам текста и даже, через strings.raw – к оригинально введённому тексту без учёта стандартных спец. символов.

Функция шаблонизации может как‑то преобразовать строку и вернуть новый результат. В простейшем случае можно просто «склеить» полученные фрагменты в строку:

'use strict';

// str восстанавливает строку function str(strings, ...values) {

let str = "";
for(let i=0; istr += values[i];
}
// последний кусок строки
str += strings[strings.length‐1]; return str;
}

let apples = 3; let oranges = 5;

// Sum of 3 + 5 = 8!

alert( str`Sum of ${apples} + ${oranges} = ${apples + oranges}!`);

Функция str в примере выше делает то же самое, что обычные обратные кавычки. Но, конечно, можно пойти намного дальше. Например, генерировать из HTML‑строки DOM‑узлы (функции шаблонизации не обязательно возвращать именно строку).

Или можно реализовать интернационализацию. В примере ниже функция i18n осуществляет перевод строки.


Она подбирает по строке вида "Hello, ${name}!" шаблон перевода "Привет, {0}!" (где {0} – место для вставки параметра) и возвращает переведённый результат со вставленным именем name :

'use strict';

let messages = {

"Hello, {0}!": "Привет, {0}!"
};

function i18n(strings, ...values) {

// По форме строки получим шаблон для поиска в messages
// На месте каждого из значений будет его номер: {0}, {1}, … let pattern = "";
for(let i=0; i}
pattern += strings[strings.length‐1];
// Теперь pattern = "Hello, {0}!"

let translated = messages[pattern]; // "Привет, {0}!"

// Заменит в "Привет, {0}" цифры вида {num} на values[num] return translated.replace(/\{(\d)\}/g, (s, num) => values[num]);

}


// Пример использования let name = "Вася";

// Перевести строку

alert( i18n`Hello, ${name}!` ); // Привет, Вася!

Итоговое использование выглядит довольно красиво, не правда ли?

Разумеется, эту функцию можно улучшить и расширить. Функция шаблонизации – это своего рода «стандартный синтаксический сахар» для упрощения форматирования и парсинга строк.