Що означає $ {} (знак долара та фігурні фігурні дужки) у рядку в JavaScript?


160

Я нічого не бачив тут чи на MDN. Я впевнений, що мені просто щось не вистачає. Має бути десь така документація?

Функціонально виглядає, що це дозволяє вкладати змінну всередині рядка, не роблячи конкатенації за допомогою +оператора. Я шукаю документацію щодо цієї функції.

Приклад:

var string = 'this is a string';

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


Чи можете ви дати деякий контекст тому, про що ви питаєте? Це питання незрозуміле як написане.
Сем Хенлі

3

5
Це не погане питання. Це нова функція, і я впевнено не можу знайти дублікат на SO, хоча приклад того, що саме було помічено, був би хорошим.

@ squint - погодьтеся, але зразок коду та посилання на джерело були б корисними.
RobG

Приклад додано. Посилання було викликом кодування, але це було дано, ніби це щось, що ви просто використовуєте. Нічого на ньому не бачив і нічого не міг знайти. (Протягом останніх декількох років мені ніколи не доводилося задавати тут питання. Так що, здається, зараз майже все ...)
Даррен Джой

Відповіді:


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
Одне, що мене тривалий час бентежило, - це те, що літерали шаблонів використовують зворотній вибір, який знаходиться ліворуч від "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 INSIDE будь-яку рядок, використовуючи позначення $ {}. Правильно?
carloswm85

Так, і ви можете спробувати це на консолі, наприкладhey ${obj.name}
Joel H

0

Ви також можете виконувати непрямі перетворення типів з літеральними шаблонами. Приклад:

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

console.log(`My favourite fruits are ${fruits}`);
// My favourite fruits are mango,orange,pineapple,papaya
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.