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

160

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

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

Пример:

var string = 'this is a string';

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

Развернуть фрагмент

— Даррен Джой
источник

Можете ли вы дать некоторый контекст тому, о чем вы спрашиваете? Этот вопрос неясен, как написано.

— Сэм Хэнли,

Шаблонные литералы ECMAScript 2015

Это не плохой вопрос. Это новая функция, и я уверен, что не могу найти дубликат на 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

Развернуть фрагмент

— Рик Рунион
источник

Одна вещь, которая меня долго смущала, это то, что литералы шаблонов используют backtick, который находится слева от «1» на клавиатуре, вместо одиночной кавычки (').

— Сидней,

Круто: Вы даже можете «ввести» код:console.log(`Your array:\n ${arr.join('\n ')}`)

— T4NK3R

Это странно, что Template Literalне поддерживается в IE, или, может быть, для IE естественно не поддерживать классные вещи. Читать подробнее

— Мохаммад Мусави

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

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}

— Джоэл Х

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

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

console.log(`My favourite fruits are ${fruits}`);
// My favourite fruits are mango,orange,pineapple,papaya

— Шалом Давид
источник