JavaScriptの文字列で$ {}（ドル記号と中括弧）はどういう意味ですか？

160

ここやMDNでは何も見ていません。私はちょうど何かが欠けていると確信しています。これに関するドキュメントがどこかにあるはずですか？

機能的には、+演算子を使用して連結を行わなくても、文字列内で変数をネストできるように見えます。この機能に関するドキュメントを探しています。

例：

var string = 'this is a string';

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

スニペットを展開

— ダレン・ジョイ
ソース

あなたが何を求めているのか、いくつかの背景を説明できますか？書かれているとおり、この質問は不明確です。

— Sam Hanley、2016年

ECMAScript 2015テンプレートリテラル

これは悪い質問ではありません。これは新しい機能であり、SOで重複を見つけることはできませんが、実際に見られた例は良かったでしょう。

@squint —同意しますが、サンプルコードとソースへの参照が役に立ちました。

— RobG 2016年

例を追加しました。リファレンスはコーディングの課題にありましたが、あたかもそれがあなたが単に使うものであるかのように、与えられたものでした。その上には何も見られず、何も見つけることができませんでした。（過去数年間、私はここでQを尋ねる必要はありませんでした。SOは今ではほとんどすべてのものを持っているようです...）

— ダレンジョイ

回答:

192

あなたはテンプレートリテラルについて話している。

複数行の文字列と文字列の補間の両方が可能です。

複数行の文字列：

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

スニペットを展開

文字列補間：

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

スニペットを展開

— リック・ラニョン
ソース

長い間私を混乱させた1つのことは、テンプレートリテラルが単一引用符（ '）の代わりにキーボードの "1"の左側にあるバックティックを使用することです。

— シドニー

クール：あなたも「注入」コードすることができます：console.log(`Your array:\n ${arr.join('\n ')}`)

— T4NK3R

Template LiteralIEでサポートされていないのは奇妙ですが、IEがクールなものをサポートしないのは当然のことです。続きを読む

— Mohammad Musavi

上記のコメントで述べたように、テンプレート文字列/リテラル内に式を含めることができます。例：

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

スニペットを展開

— ジョエルH
ソース

テンプレート文字列を使用して文字列にコードを挿入できると言うのは正しいですか？

— carloswm85

あなたは式を注入していて、式はコードです。どのタイプのコードも挿入できませんが、JavaScript式のみを挿入できます。

— Joel H

より具体的になるように努めます。文字列リテラルを使用する場合、$ {}表記を使用して任意の文字列の中にobj.valueのような式を注入できます。正しい？

— carloswm85

はい。コンソールで試してみることができます。例：hey ${obj.name}

— Joel H

テンプレートリテラルを使用して暗黙的な型変換を実行することもできます。例：

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

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

— シャローム・デイビッド
ソース