Template literals · Шаблонные строки
This page needs a recent browser (with SharedArrayBuffer support). Please update Chrome, Edge, Firefox or Safari to the latest version. · Эта страница требует современного браузера (с поддержкой SharedArrayBuffer). Пожалуйста, обновите Chrome, Edge, Firefox или Safari до последней версии.
English
A cleaner way to build strings
- Wrap a string in backticks
`and you can drop values straight in with${...}. - This is a template literal — much tidier than joining with lots of
+.
Русский
Более чистый способ создания строк
- Оберните строку в обратные кавычки
`, и вы можете напрямую подставлять значения с помощью${...}. - Это шаблонная строка — гораздо аккуратнее, чем объединение через множество
+.
let name = "Ada";
let age = 15;
console.log(`${name} is ${age}`); // → Ada is 15
English
Any expression fits inside ${ }
- Whatever you write inside
${...}is worked out first, then dropped into the string.
Русский
Любое выражение помещается внутрь ${ }
- Всё, что написано внутри
${...}, вычисляется сначала, а затем подставляется в строку.
let a = 3;
let b = 4;
console.log(`${a} + ${b} = ${a + b}`); // → 3 + 4 = 7
English
Same string, two ways
+and a template literal can build exactly the same text.- In backticks, spaces and punctuation stay where you type them, so a missing space is easy to see.
Русский
Одна строка, два способа
+и шаблонная строка могут создать абсолютно одинаковый текст.- В обратных кавычках пробелы и пунктуация остаются там, где вы их напечатали, поэтому пропущенный пробел легко заметить.
let item = "pen";
let price = 3;
console.log("A " + item + " costs " + price + " yuan."); // → A pen costs 3 yuan.
console.log(`A ${item} costs ${price} yuan.`); // → A pen costs 3 yuan.
English
Watch out
- Backticks
`are not the same as quotes'or".${...}only works inside backticks. - Bonus: a backtick string can span several lines — handy for longer messages.
Русский
Будьте осторожны
- Обратные кавычки
`не то же самое, что кавычки'или".${...}работает только внутри обратных кавычек. - Бонус: строка в обратных кавычках может занимать несколько строк — удобно для длинных сообщений.
English
Common mistakes
- Template literals use backticks and
${...}:`Hi ${name}`, not quotes. - Inside
${...}you can put any expression.
Русский
Распространенные ошибки
- Шаблонные строки используют обратные кавычки и
${...}:`Hi ${name}`, а не обычные кавычки. - Внутри
${...}можно поместить любое выражение.
English
Now you try
- Use backticks and
${...}. - Press Check answer to test it.
Русский
Теперь попробуйте сами
- Используйте обратные кавычки и
${...}. - Нажмите Проверить ответ, чтобы протестировать её.
let name = "Sam". Use a template literal (backticks) to log Hello, Sam!. · Значение let name = "Sam". Используйте шаблонную строку (обратные кавычки), чтобы вывести значение переменной Hello, Sam!.
Click Run to see the output here. · Нажмите Запустить, чтобы увидеть результат здесь.
a is 3 and b is 4. Use a template literal to log 3 + 4 = 7 (put a + b inside ${ }). · a равно 3, а b равно 4. Используйте шаблонную строку (template literal) для вывода 3 + 4 = 7 (поместите a + b внутрь ${ }).
Click Run to see the output here. · Нажмите Запустить, чтобы увидеть результат здесь.
Use a template literal to log Total: 10, working out the 10 as 5 * 2 inside ${ }. · Используйте шаблонную строку для вывода Total: 10, вычислив выражение 10 как 5 * 2 внутри ${ }.
Click Run to see the output here. · Нажмите Запустить, чтобы увидеть результат здесь.