Что означает $ {} (знак доллара и фигурные скобки) в строке в Javascript?

160

Я не видел ничего здесь или на MDN. Я уверен, что просто что-то упустил. Где-то должна быть документация по этому поводу?

Функционально это выглядит так, как будто позволяет вам вкладывать переменную в строку без конкатенации с использованием +оператора. Я ищу документацию по этой функции.

Пример:

var string = 'this is a string';

console.log(`Insert a string here: ${string}`);

Даррен Джой
источник
Можете ли вы дать некоторый контекст тому, о чем вы спрашиваете? Этот вопрос неясен, как написано.
Сэм Хэнли,
5
Это не плохой вопрос. Это новая функция, и я уверен, что не могу найти дубликат на SO, хотя пример того, что именно было замечено, был бы хорош.
@ squint - согласитесь, но пример кода и ссылка на источник были бы полезны.
RobG
Пример добавлен. Ссылка была в коде проблемы, но это было дано, как если бы это было то, что вы просто используете. Ничего не видел и ничего не мог найти. (За последние несколько лет мне никогда не приходилось спрашивать здесь Q. Так что, похоже, сейчас есть почти все ...)
Даррен Джой

Ответы:

192

Вы говорите о шаблонных литералах .

Они допускают как многострочные строки, так и интерполяцию строк.

Многострочные строки:

console.log(`foo
bar`);
// foo
// bar

Строковая интерполяция:

var foo = 'bar';
console.log(`Let's meet at the ${foo}`);
// Let's meet at the bar

Рик Рунион
источник
67
Одна вещь, которая меня долго смущала, это то, что литералы шаблонов используют backtick, который находится слева от «1» на клавиатуре, вместо одиночной кавычки (').
Сидней,
19
Круто: Вы даже можете «ввести» код:console.log(`Your array:\n ${arr.join('\n ')}`)
T4NK3R
5
Это странно, что Template Literalне поддерживается в IE, или, может быть, для IE естественно не поддерживать классные вещи. Читать подробнее
Мохаммад Мусави
12

Как упоминалось в комментарии выше, вы можете иметь выражения в строках / литералах шаблона. Пример:

const one = 1;
const two = 2;
const result = `One add two is ${one + two}`;
console.log(result); // output: One add two is 3

Джоэл Х
источник
Правильно ли говорить, что строки шаблона могут использоваться для ввода кода в строку?
carloswm85
Вы вводите выражения, а выражения - это код. Вы не можете внедрить любой тип кода, однако, только выражения JavaScript.
Джоэл Х
Я постараюсь быть более конкретным. При использовании строковых литералов я могу вводить выражения типа obj.value ВНУТРИ любой строки, используя нотацию $ {}. Правильно?
carloswm85
Да, и вы можете попробовать это сами в консоли, напримерhey ${obj.name}
Джоэл Х
0

Вы также можете выполнять неявные преобразования типов с помощью литералов шаблона. Пример:

let fruits = ["mango","orange","pineapple","papaya"];

console.log(`My favourite fruits are ${fruits}`);
// My favourite fruits are mango,orange,pineapple,papaya
Шалом Давид
источник