Недавно я использовал в своем проекте строки шаблона ES6, которые кратко описаны здесь.
1. Раньше мы также могли использовать JavaScript для вывода строк шаблона, обычно следующим образом:
$("#result").append(
"Он <b>"+person.name+"</b>"+"и мы хотим знать его"+person.age+".Это все"
); Но мы видим, что этот традиционный подход требует использования большого количества "" (двойных кавычек) и +, чтобы соединить их вместе, чтобы получить нужный нам шаблон. Но это очень неудобно.
Таким образом, ES6 предоставляет строки шаблона, которые помечены ` (обратным кавычком), а переменные заключены в ${}. Приведенный выше пример можно записать следующим образом, используя строки шаблона:
$("#result").append(
`Его зовут <b>${person.name</b>, и мы хотим знать его ${person.age}. Вот и все`
); Этот подход намного проще. Нам больше не нужно использовать много символов "" и + для объединения строк и переменных.
2. Конечно, в строку шаблона можно вводить переменные, а можно и не использовать переменные. Как показано ниже:
`Я мужчина.`
`Что бы вы ни делали,
я доверяю вам.`
3. Мы также можем сначала определить переменные, а затем встроить их в строку шаблона:
var name="zzw";
` ${name}, что бы ты ни делал,
Я доверяю вам.` 4. Очевидно, что поскольку обратный апостроф является идентификатором строки шаблона, если нам нужно использовать обратный апостроф в строке, нам нужно экранировать его следующим образом:
`Неважно`, что вы делаете,
Я доверяю вам».
5. Примечание. Если вы используете строки шаблона для представления многострочных строк, все пробелы и отступы будут сохранены при выводе! !
console.log(`Неважно`что вы делаете, Я доверяю вам.`);
Вывод следующий:
6. Вы можете поместить любое выражение JavaScript в фигурные скобки в ${}, выполнять операции и ссылаться на свойства объекта.
вар х=88;
вар у=100;
console.log(`x=${++x},y=${x+y}`); Результат следующий:
7. Еще более мощный инструмент: строка шаблона также может вызывать функции:
function string(){
return "zzw нравится es6!";
}
console.log(`Что вы хотите сказать? Ну, ${string()}`); Результат следующий:
Кроме того, если результат функции не является строкой, он будет преобразован в строку по общим правилам:
function string(){
вернуть 666;
}
console.log(`Что вы хотите сказать? Ну, ${string()}`); Результат следующий:
Здесь число 666 фактически преобразуется в строку 666.
8. Если переменная в ${} не названа, будет сообщено об ошибке:
console.log(`Что вы хотите сказать? Ну, ${string( )}`); В приведенном выше коде функция string() не объявлена, поэтому сообщается об ошибке:
9. На самом деле мы тоже можем ввести строку в ${}, и результат знания всё равно вернет строку:
console.log(`Что вы хотите сказать? Ну ${"Вообще-то я не переменная ~"}`) ; Результат следующий:
10. Если вы хотите сослаться на саму строку шаблона, вы можете написать ее так:
let str="return"+"`Hello! ${name}`";
let func=new Function("name",str);
console.log(func("zzw")); Результаты следующие:
