Шаблонные строки - JavaScript | MDN
Skip to main content
Skip to search
MDN
HTML
HTML: Markup language
HTML reference
Elements
Global attributes
Attributes
See all…
HTML guides
Responsive images
HTML cheatsheet
Date & time formats
See all…
Markup languages
SVG
MathML
XML
CSS
CSS: Styling language
CSS reference
Properties
Selectors
At-rules
Values
See all…
CSS guides
Box model
Animations
Flexbox
Colors
See all…
Layout cookbook
Column layouts
Centering an element
Card component
See all…
JavaScriptJS
JavaScript: Scripting language
JS reference
Standard built-in objects
Expressions & operators
Statements & declarations
Functions
See all…
JS guides
Control flow & error handing
Loops and iteration
Working with objects
Using classes
See all…
Web APIs
Web APIs: Programming interfaces
Web API reference
File system API
Fetch API
Geolocation API
HTML DOM API
Push API
Service worker API
See all…
Web API guides
Using the Web animation API
Using the Fetch API
Working with the History API
Using the Web speech API
Using web workers
All
All web technology
Technologies
Accessibility
HTTP
URI
Web extensions
WebAssembly
WebDriver
See all…
Topics
Media
Performance
Privacy
Security
Progressive web apps
Learn
Learn web development
Frontend developer course
Getting started modules
Core modules
MDN Curriculum
Check out the video course from Scrimba, our partner
Learn HTML
Structuring content with HTML module
Learn CSS
CSS styling basics module
CSS layout module
Learn JavaScript
Dynamic scripting with JavaScript module
Tools
Discover our tools
Playground
HTTP Observatory
Border-image generator
Border-radius generator
Box-shadow generator
Color format converter
Color mixer
Shape generator
About
Get to know MDN better
About MDN
Advertise with us
Community
MDN on GitHub
Blog
Toggle sidebar
Веб-технологии для разработчиков
JavaScript
Справочник по JavaScript
Шаблонные строки
Theme
OS default
Light
Dark
Русский
Remember language
Learn more
Deutsch
English (US)
Español
Français
日本語
한국어
Português (do Brasil)
Русский
中文 (简体)
正體中文 (繁體)
This page was translated from English by the community.
Learn more and join the MDN Web Docs community.
View in English
Always switch to English
Шаблонные строки
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since сентябрь 2015 г..
Learn more
See full compatibility
Шаблонными литералами называются строковые литералы, допускающие использование выражений внутри. С ними вы можете использовать многострочные литералы и строковую интерполяцию. В спецификациях до ES2015 они назывались "шаблонными строками".
In this article
Синтаксис
Описание
Спецификации
Совместимость с браузерами
Смотрите также
Синтаксис
`строка текста`
`строка текста 1
строка текста 2`
`строка текста ${выражение} строка текста`
tag `строка текста ${выражение} строка текста`
Описание
Шаблонные литералы заключены в обратные кавычки (` `) вместо двойных или одинарных. Они могут содержать подстановки, обозначаемые знаком доллара и фигурными скобками (${выражение}). Выражения в подстановках и текст между ними передаются в функцию. По умолчанию функция просто объединяет все части в строку. Если перед строкой есть выражение (здесь это tag), то шаблонная строка называется "теговым шаблоном". В этом случае, теговое выражение (обычно функция) вызывается с обработанным шаблонным литералом, который вы можете изменить перед выводом. Для экранирования обратной кавычки в шаблонных литералах указывается обратный слеш \.
js
`\`` === "`"; // --> true
Многострочные литералы
Символы новой строки являются частью шаблонных литералов. Используя обычные строки, вставка переноса потребовала бы следующего синтаксиса:
js
console.log("string text line 1\n" + "string text line 2");
// "string text line 1
//  string text line 2"
То же с использованием шаблонных литералов:
js
console.log(`string text line 1
string text line 2`);
// "string text line 1
//  string text line 2"
Интерполяция выражений
Для вставки выражений в обычные строки вам пришлось бы использовать следующий синтаксис:
js
var a = 5;
var b = 10;
console.log("Fifteen is " + (a + b) + " and not " + (2 * a + b) + ".");
// "Fifteen is 15 and not 20."
Теперь, при помощи шаблонных литералов, вам доступен "синтаксический сахар", делающий подстановки вроде той более читабельными:
js
var a = 5;
var b = 10;
console.log(`Fifteen is ${a + b} and not ${2 * a + b}.`);
// "Fifteen is 15 and not 20."
Вложенные шаблоны
Временами, вложить шаблон — это кратчайший и, возможно, более читабельный способ составить строку. Просто поместите внутрь шаблона с обратными кавычками ещё одни, обернув их в подстановку ${ }. Например, если выражение истинно, можно вернуть шаблонный литерал.
В ES5:
js
var classes = "header";
classes += isLargeScreen()
? ""
: item.isCollapsed
? " icon-expander"
: " icon-collapser";
В ES2015 с шаблонными литералами без вложения:
js
const classes = `header ${
isLargeScreen() ? "" : item.isCollapsed ? "icon-expander" : "icon-collapser"
}`;
В ES2015 с вложенными шаблонными литералами:
js
const classes = `header ${
isLargeScreen() ? "" : `icon-${item.isCollapsed ? "expander" : "collapser"}`
}`;
Теговые шаблоны
Расширенной формой шаблонных литералов являются теговые шаблоны. Они позволяют разбирать шаблонные литералы с помощью функции. Первый аргумент такой функции содержит массив строковых значений, а остальные содержат выражения из подстановок. В итоге, функция должна вернуть собранную строку (или что-либо совсем иное, как будет показано далее). Имя функции может быть любым.
js
var person = "Mike";
var age = 28;
function myTag(strings, personExp, ageExp) {
var str0 = strings[0]; // "That "
var str1 = strings[1]; // " is a "
// Технически, в конце итогового выражения
// (в нашем примере) есть ещё одна строка,
// но она пустая (""), так что пропустим её.
// var str2 = strings[2];
var ageStr;
if (ageExp > 99) {
ageStr = "centenarian";
} else {
ageStr = "youngster";
}
// Мы даже можем вернуть строку, построенную другим шаблонным литералом
return `${str0}${personExp}${str1}${ageStr}`;
}
var output = myTag`That ${person} is a ${age}`;
console.log(output);
// That Mike is a youngster
Функция тега не обязана возвращать строку, как показано в примере ниже:
js
function template(strings, ...keys) {
return function (...values) {
var dict = values[values.length - 1] || {};
var result = [strings[0]];
keys.forEach(function (key, i) {
var value = Number.isInteger(key) ? values[key] : dict[key];
result.push(value, strings[i + 1]);
});
return result.join("");
};
}
var t1Closure = template`${0}${1}${0}!`;
t1Closure("Y", "A"); // "YAY!"
var t2Closure = template`${0} ${"foo"}!`;
t2Closure("Hello", { foo: "World" }); // "Hello World!"
Сырые строки
Специальное свойство raw, доступное для первого аргумента тегового шаблона, позволяет получить строку в том виде, в каком она была введена, без экранирования.
js
function tag(strings) {
return strings.raw[0];
}
tag`string text line 1 \\n string text line 2`;
// выводит "string text line 1 \\n string text line 2",
// включая 'n' и два символа '\'
Вдобавок, существует метод String.raw(), возвращающий точно такую же исходную строку, какую вернула бы функция шаблона по умолчанию и строковая конкатенация вместе.
js
var str = String.raw`Hi\n${2 + 3}!`;
// "Hi\n5!"
str.length;
// 6
str.split("").join(",");
// "H,i,\,n,5,!"
Теговые шаблоны и экранирование символов
Поведение в ES2016
В ECMAScript 2016 теговые шаблоны следуют правилам экранирования следующих символов:
символы Unicode, начинающиеся с "\u", например, \u00A9
точки кода Unicode, начинающиеся с "\u{}", например, \u{2F804}
шестнадцатеричные представления символов, начинающиеся с "\x", например, \xA9
восьмеричные представления символов, начинающиеся с "\", например, \251
Отсюда вытекает проблема теговых шаблонов: следуя грамматике ECMAScript, анализатор кода, найдя символ \, будет искать корректное представление символа Unicode, но может не найти его вовсе. Пример ниже показывает это:
js
latex`\unicode`;
// В старых версиях ECMAScript (ES2016 и раньше) выкинет исключение:
// SyntaxError: malformed Unicode character escape sequence
Поведение в ES2018
Теговые шаблоны должны позволять встраивать языки (например, DSLs или LaTeX), в которых широко используются многие другие экранирования. Предложение Редакция шаблонных литералов (уровень 4, одобренный к добавлению в стандарт ECMAScript 2018) устраняет синтаксические ограничения экранирования теговых шаблонов в ECMAScript.
Однако, некорректное экранирование символов по-прежнему нужно отображать в "приготовленном" отображении. Оно показывается в виде undefined в "приготовленном" массиве:
js
function latex(str) {
return { cooked: str[0], raw: str.raw[0] };
}
latex`\unicode`;
// { cooked: undefined, raw: "\unicode" }
Заметьте, что ограничение на экранирование символов проявляется лишь в теговых шаблонах, и не проявляется в нетеговых шаблонных литералах:
js
let bad = `bad escape sequence: \unicode`;
Спецификации
Specification
ECMAScript® 2027 Language Specification
# sec-template-literals
Совместимость с браузерами
Enable JavaScript to view this browser compatibility table.
Смотрите также
String
String.raw()
Лексическая грамматика
Подобные шаблонам строки в ES3-совместимом синтаксисе
ES6 в деталях: шаблонные строки
Help improve MDN
Was this page helpful to you?
Yes
No
Learn how to contribute
This page was last modified on 17 дек. 2024 г. by MDN contributors.
View this page on GitHub • Report a problem with this content
Filter sidebar
Clear filter input
JavaScript
Уроки
Руководство по JavaScript
Вступление
Грамматика и типы
Порядок выполнения и обработка ошибок
Циклы и итерации
Функции
Выражения и операторы
Numbers and strings
Representing dates & times
Регулярные выражения
Упорядоченные наборы данных
Коллекции
Работа с объектами
Using classes
Использование промисов
Типизированные массивы JavaScript
Итераторы и генераторы
Resource management
Internationalization
Модули JavaScript
Средние
Language overview
Структуры данных JavaScript
Проверки на равенство и когда их использовать
Перечисляемость и принадлежность свойств
Замыкания
Продвинутые
Наследование и цепочка прототипов
Метапрограммирование
Управление памятью
Справочники
Встроенные объекты
AggregateError
Array
ArrayBuffer
AsyncDisposableStack
AsyncFunction
AsyncGenerator
AsyncGeneratorFunction
AsyncIterator
Atomics
BigInt
BigInt64Array
BigUint64Array
Boolean
DataView
Дата
decodeURI()
decodeURIComponent()
DisposableStack
encodeURI()
encodeURIComponent()
Error
escape()
eval()
EvalError
FinalizationRegistry
Float16Array
Float32Array
Float64Array
Function
Generator
GeneratorFunction
globalThis
Infinity
Int8Array
Int16Array
Int32Array
InternalError
Intl
isFinite()
isNaN
Iterator
JSON
Map
Math
NaN
Number
Object
parseFloat()
parseInt()
Promise
Прокси
RangeError
ReferenceError
Reflect
RegExp
Set
SharedArrayBuffer
String
SuppressedError
Symbol
SyntaxError
Temporal
TypedArray
TypeError
Uint8Array
Uint8ClampedArray
Uint16Array
Uint32Array
undefined
unescape()
URIError
WeakMap
WeakRef
WeakSet
Выражения и операторы
Сложение (+)
Сложение с присваиванием (+=)
Присваивание (=)
async function expression
async function* expression
await
Bitwise AND (&)
Bitwise AND assignment (&=)
Bitwise NOT (~)
Bitwise OR (|)
Bitwise OR assignment (|=)
Bitwise XOR (^)
Bitwise XOR assignment (^=)
class expression
Оператор Запятая
Условный (тернарный) оператор
Декремент (--)
delete
Деструктурирующее присваивание
Division (/)
Division assignment (/=)
Нестрогое равенство (==)
Exponentiation (**)
Exponentiation assignment (**=)
Функциональное выражение
function* expression
Greater than (>)
Greater than or equal (>=)
Оператор группировки
import.meta
import.meta.resolve()
import()
in
Increment (++)
Нестрогое неравенство (!=)
instanceof
Left shift (<<)
Left shift assignment (<<=)
Less than (<)
Less than or equal (<=)
Логическое И (&&)
Присваивание логического И (&&=)
Логическое НЕ (!)
Логическое ИЛИ (||)
Присваивание логического ИЛИ (||=)
Multiplication (*)
Multiplication assignment (*=)
Оператор new
new.target
null
Логическое нулевое присваивание (??=)
Оператор нулевого слияния (??)
Инициализация объектов
Приоритет операторов
Оператор опциональной последовательности
Property accessors
Remainder (%)
Remainder assignment (%=)
Right shift (>>)
Right shift assignment (>>=)
Spread syntax
Строгое равенство (===)
Строгое неравенство (!==)
Subtraction (-)
Subtraction assignment (-=)
super
this
typeof
Unary negation (-)
Unary plus (+)
Unsigned right shift (>>>)
Unsigned right shift assignment (>>>=)
void operator
yield
yield*
Инструкции и объявления
async function
async function*
await using
Блок
break
class
const
continue
debugger
do...while
Пустая инструкция
export
Expression statement
for
for await...of
for...in
for...of
function
function*
if...else
import
Import attributes
Метка
let
return
switch
throw
try...catch
using
var
while
with
Функции
Стрелочные функции
Параметры по умолчанию
getter
Определение методов
Остаточные параметры (rest parameters)
setter
Объект arguments
[Symbol.iterator]()
arguments.callee
arguments.length
Классы
constructor
extends
Приватные поля класса
Публичные поля классов
static
Static initialization blocks
Регулярные выражения
Backreference: \1, \2
Capturing group: (...)
Character class escape: \d, \D, \w, \W, \s, \S
Character class: [...], [^...]
Character escape: \n, \u{...}
Disjunction: |
Input boundary assertion: ^, $
Literal character: a, b
Lookahead assertion: (?=...), (?!...)
Lookbehind assertion: (?<=...), (?<!...)
Modifier: (?ims-ims:...)
Named backreference: \k<name>
Named capturing group: (?<name>...)
Non-capturing group: (?:...)
Quantifier: *, +, ?, {n}, {n,}, {n,m}
Unicode character class escape: \p{...}, \P{...}
Wildcard: .
Word boundary assertion: \b, \B
Ошибки
AggregateError: No Promise in Promise.any was resolved
Error: Permission denied to access property "x"
InternalError: too much recursion
RangeError: argument is not a valid code point
RangeError: BigInt division by zero
RangeError: BigInt negative exponent
RangeError: form must be one of 'NFC', 'NFD', 'NFKC', or 'NFKD'
RangeError: invalid array length
RangeError: invalid date
RangeError: precision is out of range
RangeError: radix must be an integer
RangeError: repeat count must be less than infinity
RangeError: repeat count must be non-negative
RangeError: x can't be converted to BigInt because it isn't an integer
ReferenceError: "x" is not defined
ReferenceError: assignment to undeclared variable "x"
ReferenceError: can't access lexical declaration 'X' before initialization
ReferenceError: must call super constructor before using 'this' in derived class constructor
ReferenceError: super() called twice in derived class constructor
SyntaxError: 'arguments'/'eval' can't be defined or assigned to in strict mode code
SyntaxError: "0"-prefixed octal literals and octal escape seq. are deprecated
SyntaxError: "use strict" not allowed in function with non-simple parameters
SyntaxError: "x" is a reserved identifier
SyntaxError: \ at end of pattern
SyntaxError: a declaration in the head of a for-of loop can't have an initializer
SyntaxError: applying the 'delete' operator to an unqualified name is deprecated
SyntaxError: arguments is not valid in fields
SyntaxError: await is only valid in async functions, async generators and modules
SyntaxError: await/yield expression can't be used in parameter
SyntaxError: cannot use ?? unparenthesized within || and && expressions
SyntaxError: character class escape cannot be used in class range in regular expression
SyntaxError: continue must be inside loop
SyntaxError: duplicate capture group name in regular expression
SyntaxError: duplicate formal argument x
SyntaxError: for-in loop head declarations may not have initializers
SyntaxError: function statement requires a name(функция оператор требует имя)
SyntaxError: functions cannot be labelled
SyntaxError: getter and setter for private name #x should either be both static or non-static
SyntaxError: getter functions must have no arguments
SyntaxError: identifier starts immediately after numeric literal
SyntaxError: illegal character
SyntaxError: import declarations may only appear at top level of a module
SyntaxError: incomplete quantifier in regular expression
ReferenceError: invalid assignment left-hand side
SyntaxError: invalid BigInt syntax
SyntaxError: invalid capture group name in regular expression
SyntaxError: invalid character in class in regular expression
SyntaxError: invalid class set operation in regular expression
SyntaxError: invalid decimal escape in regular expression
SyntaxError: invalid identity escape in regular expression
SyntaxError: invalid named capture reference in regular expression
SyntaxError: invalid property name in regular expression
SyntaxError: invalid range in character class
SyntaxError: invalid regexp group
SyntaxError: invalid regular expression flag "x"
SyntaxError: invalid unicode escape in regular expression
SyntaxError: JSON.parse: bad parsing
SyntaxError: label not found
SyntaxError: missing : after property id
Синтаксическая ошибка: пропущенный символ ")" после списка аргументов
SyntaxError: missing ) after condition
SyntaxError: missing ] after element list
SyntaxError: missing } after function body
SyntaxError: missing } after property list
SyntaxError: missing = in const declaration
SyntaxError: missing formal parameter( отсутствует формальный параметр)
SyntaxError: missing name after . operator(отсутствует имя после. оператора)
SyntaxError: missing variable name
SyntaxError: negated character class with strings in regular expression
SyntaxError: new keyword cannot be used with an optional chain
SyntaxError: nothing to repeat
SyntaxError: numbers out of order in {} quantifier.
SyntaxError: octal escape sequences can't be used in untagged template literals or in strict mode code
SyntaxError: parameter after rest parameter
SyntaxError: private fields can't be deleted
SyntaxError: property name __proto__ appears more than once in object literal
SyntaxError: raw bracket is not allowed in regular expression with unicode flag
SyntaxError: redeclaration of formal parameter "x"
SyntaxError: reference to undeclared private field or method #x
SyntaxError: rest parameter may not have a default
SyntaxError: return not in function
SyntaxError: setter functions must have one argument
SyntaxError: string literal contains an unescaped line break
SyntaxError: super() is only valid in derived class constructors
SyntaxError: tagged template cannot be used with optional chain
SyntaxError: Unexpected '#' used outside of class body
SyntaxError: Unexpected token
SyntaxError: unlabeled break must be inside loop or switch
SyntaxError: unparenthesized unary expression can't appear on the left-hand side of '**'
SyntaxError: use of super property/member accesses only valid within methods or eval code within methods
SyntaxError: Using //@ to indicate sourceURL pragmas is deprecated. Use //# instead
Ошибка Ссылки: устаревший вызывающий объект или использование аргументов
TypeError: 'x' is not iterable (Тип ошибки  'x' не является итерационным)
TypeError: "x" is (not) "y"
TypeError: "x" is not a constructor
TypeError: "x" is not a function
TypeError: "x" is not a non-null object(Тип ошибки: "x" не является ненулевым объектом)
TypeError: "x" is read-only(Ошибка Типа: "x" только для чтения)
TypeError: already executing generator
TypeError: BigInt value can't be serialized in JSON
TypeError: calling a builtin X constructor without new is forbidden
TypeError: can't access/set private field or method: object is not the right class
TypeError: can't assign to property "x" on "y": not an object
TypeError: can't convert BigInt to number
TypeError: can't convert x to BigInt
TypeError: can't define property "x": "obj" is not extensible
TypeError: can't delete non-configurable array element(Тип ошибки:не удаётся удалить настраиваемый элемент массива)
TypeError: can't redefine non-configurable property "x"
TypeError: can't set prototype of this object
TypeError: can't set prototype: it would cause a prototype chain cycle
TypeError: cannot use 'in' operator to search for 'x' in 'y'(не удаётся использовать 'in' оператор поиска для 'x' в 'y')
TypeError: class constructors must be invoked with 'new'
TypeError: cyclic object value
TypeError: derived class constructor returned invalid value x
TypeError: getting private setter-only property
TypeError: Initializing an object twice is an error with private fields/methods
TypeError: invalid 'instanceof' operand 'x'(Тип ошибки:  неверный 'экземпляром' операнд 'х')
TypeError: invalid Array.prototype.sort argument (TypeError: недопустимый Array.prototype.sort argument)
TypeError: invalid assignment to const "x"(недопустимое назначение const "x")
TypeError: Iterator/AsyncIterator constructor can't be used directly
TypeError: matchAll/replaceAll must be called with a global RegExp
TypeError: More arguments needed
TypeError: "x" has no properties
TypeError: property "x" is non-configurable and can't be deleted(свойство "x" не настраивается и не может быть удалено)
TypeError: Reduce of empty array with no initial value(Тип ошибки: уменьшение пустого массива без начального значения)
TypeError: setting getter-only property "x"(установка свойства только для геттера "x")
TypeError: WeakSet key/WeakMap value 'x' must be an object or an unregistered symbol
X.prototype.y called on incompatible type
URIError: malformed URI sequence
Warning: -file- is being assigned a //# sourceMappingURL, but already has one
Warning: unreachable code after return statement
Ещё
Обзор технологий JavaScript
Execution model
Лексическая грамматика
Протоколы перебора
Строгий режим
Шаблонные строки
Висящие запятые
Устаревшие возможности
MDN
Your blueprint for a better internet.
MDN
About
Blog
Mozilla careers
Advertise with us
MDN Plus
Product help
Contribute
MDN Community
Community resources
Writing guidelines
MDN Discord
MDN on GitHub
Developers
Web technologies
Learn web development
Guides
Tutorials
Glossary
Hacks blog
Mozilla
Website Privacy Notice
Telemetry Settings
Legal
Community Participation Guidelines
Portions of this content are ©1998–2026 by individual mozilla.org contributors. Content available under a Creative Commons license.