JavaScript では、バッククォート†は単一引用符と同じように機能するようです。たとえば、バッククォートを使用して、次のように文字列を定義できます。
var s = `abc`;
バックティックの動作が実際に一重引用符の動作と異なる方法はありますか?
† プログラマーの間では、「バックティック」はより一般的にグラブ アクセントと呼ばれるものの 1 つの名前であることに注意してください。プログラマーは、"backquote" と "backgrave" という別名を使用することもあります。また、Stack Overflowなどでは、「backtick」の他の一般的なスペルは「back-tick」と「back tick」です。
これはテンプレート リテラルと呼ばれる機能です。
これらは、ECMAScript 2015 仕様の以前の版では「テンプレート文字列」と呼ばれていました。
テンプレート リテラルは、Firefox 34、Chrome 41、および Edge 12 以降でサポートされていますが、Internet Explorer ではサポートされていません。
テンプレート リテラルを使用して複数行の文字列を表すことができ、「補間」を使用して変数を挿入できます。
var a = 123, str = `---
a is: ${a}
---`;
console.log(str);
出力：
---
a is: 123
---
さらに重要なことは、変数名だけでなく、任意の JavaScript 式を含めることができるということです。
var a = 3, b = 3.1415;
console.log(`PI is nearly ${Math.max(a, b)}`);
ECMAScript 6 では、バッククォートを区切り文字として使用する、新しいタイプの文字列リテラルが用意されています。これらのリテラルを使用すると、基本的な文字列補間式を埋め込むことができ、自動的に解析および評価されます。
let person = {name: 'RajiniKanth', age: 68, greeting: 'Thalaivaaaa!' };
let usualHtmlStr = "<p>My name is " + person.name + ",</p>\n" +
"<p>I am " + person.age + " old</p>\n" +
"<strong>\"" + person.greeting + "\" is what I usually say</strong>";
let newHtmlStr =
`<p>My name is ${person.name},</p>
<p>I am ${person.age} old</p>
<p>"${person.greeting}" is what I usually say</strong>`;
console.log(usualHtmlStr);
console.log(newHtmlStr);
ご覧のとおり`、文字列リテラルとして解釈される一連の文字の前後に を使用しましたが、この形式の式は${..}インラインですぐに解析および評価されます。
補間された文字列リテラルの非常に優れた利点の 1 つは、複数の行に分割できることです。
var Actor = {"name": "RajiniKanth"};
var text =
`Now is the time for all good men like ${Actor.name}
to come to the aid of their
country!`;
console.log(text);
// Now is the time for all good men like RajiniKanth
// to come to the aid of their
// country!
補間式
${..}関数呼び出し、インライン関数式呼び出し、さらにはその他の補間文字列リテラルを含む、補間文字列リテラルの内部には有効な式を含めることができます。
function upper(s) {
return s.toUpperCase();
}
var who = "reader"
var text =
`A very ${upper("warm")} welcome
to all of you ${upper(`${who}s`)}!`;
console.log(text);
// A very WARM welcome
// to all of you READERS!
ここで、内部補間された文字列リテラルは、変数を文字列と組み合わせるときに、 とは対照的に`${who}s`、少し便利でした。また、補間された文字列リテラルは、それが表示される場所で字句的にスコープされているだけで、動的にスコープされていないことに注意してください。who"s"who + "s"
function foo(str) {
var name = "foo";
console.log(str);
}
function bar() {
var name = "bar";
foo(`Hello from ${name}!`);
}
var name = "global";
bar(); // "Hello from bar!"
HTML にテンプレート リテラルを使用すると、煩わしさが減り、間違いなく読みやすくなります。
昔ながらの方法：
'<div class="' + className + '">' +
'<p>' + content + '</p>' +
'<a href="' + link + '">Let\'s go</a>'
'</div>';
ECMAScript 6 の場合:
`<div class="${className}">
<p>${content}</p>
<a href="${link}">Let's go</a>
</div>`
タグ付きテンプレート リテラル
テンプレート文字列にタグを付けることもできます。テンプレート文字列がタグ付けされると、リテラルと置換が関数に渡され、結果の値が返されます。
function myTaggedLiteral(strings) {
console.log(strings);
}
myTaggedLiteral`test`; //["test"]
function myTaggedLiteral(strings, value, value2) {
console.log(strings, value, value2);
}
let someText = 'Neat';
myTaggedLiteral`test ${someText} ${2 + 3}`;
//["test", ""]
// "Neat"
// 5
ここでスプレッド演算子を使用して、複数の値を渡すことができます。最初の引数 (文字列と呼びます) は、すべてのプレーンな文字列 (補間された式の間のもの) の配列です。
次に、 を使用して後続のすべての引数を values と呼ばれる配列にまとめ... gather/rest operatorますが、もちろん、上記のように文字列パラメーターに続く個々の名前付きパラメーターとしてそれらを残すこともできます ( value1、value2など)。
function myTaggedLiteral(strings, ...values) {
console.log(strings);
console.log(values);
}
let someText = 'Neat';
myTaggedLiteral`test ${someText} ${2 + 3}`;
//["test", ""]
// "Neat"
// 5
values 配列に集められた引数は、文字列リテラルで見つかった既に評価された補間式の結果です。タグ付き文字列リテラルは、補間が評価された後の処理ステップのようなものですが、最終的な文字列値がコンパイルされる前に、リテラルから文字列を生成することをより細かく制御できます。再利用可能なテンプレートを作成する例を見てみましょう。
const Actor = {
name: "RajiniKanth",
store: "Landmark"
}
const ActorTemplate = templater`<article>
<h3>${'name'} is a Actor</h3>
<p>You can find his movies at ${'store'}.</p>
</article>`;
function templater(strings, ...keys) {
return function(data) {
let temp = strings.slice();
keys.forEach((key, i) => {
temp[i] = temp[i] + data[key];
});
return temp.join('');
}
};
const myTemplate = ActorTemplate(Actor);
console.log(myTemplate);
生の文字列
タグ関数は、配列である文字列と呼ばれる最初の引数を受け取ります。ただし、追加のデータが含まれています。すべての文字列の生の未処理バージョンです。.raw次のように、プロパティを使用してこれらの生の文字列値にアクセスできます。
function showraw(strings, ...values) {
console.log(strings);
console.log(strings.raw);
}
showraw`Hello\nWorld`;
ご覧のとおり、生の文字列ではエスケープされた\nシーケンスが保持されますが、処理された文字列ではエスケープされていない実際の改行のように扱われます。ECMAScript 6 には、文字列リテラル タグとして使用できる組み込み関数が付属していますString.raw(..)。文字列の生のバージョンを単純に通過します。
console.log(`Hello\nWorld`);
/* "Hello
World" */
console.log(String.raw`Hello\nWorld`);
// "Hello\nWorld"
バッククォート ( `) は、テンプレート リテラルを定義するために使用されます。テンプレート リテラルは、文字列の操作を容易にする ECMAScript 6 の新機能です。
特徴：
注:バッククォート ( ) 内で一'重引用符 ( ) と二重引用符( )を簡単に使用できます。"`
例：
var nameStr = `I'm "Alpha" Beta`;
変数または式を補間するには、その${expression}表記法を使用できます。
var name = 'Alpha Beta';
var text = `My name is ${name}`;
console.log(text); // My name is Alpha Beta
複数行の文字列は、改行に使用する必要がなくなったことを意味します\n。
例：
const name = 'Alpha';
console.log(`Hello ${name}!
How are you?`);
出力：
Hello Alpha!
How are you?
バッククォートは、以前はテンプレート文字列と呼ばれていたテンプレート リテラルを囲みます。テンプレート リテラルは、埋め込み式と文字列補間機能を使用できる文字列リテラルです。
テンプレート リテラルには、式がドル記号と中括弧で囲まれたプレースホルダーに埋め込まれています${expression}。プレースホルダー/式は関数に渡されます。デフォルトの関数は文字列を連結するだけです。
バッククォートをエスケープするには、その前にバックスラッシュを置きます:
`\`` === '`'; => true
バッククォートを使用して、複数行の文字列をより簡単に記述します。
console.log(`string text line 1
string text line 2`);
また
console.log(`Fifteen is ${a + b} and
not ${2 * a + b}.`);
対バニラ JavaScript:
console.log('string text line 1\n' +
'string text line 2');
また
console.log('Fifteen is ' + (a + b) + ' and\nnot ' + (2 * a + b) + '.');
エスケープ シーケンス:
\uたとえば、によって開始される Unicode エスケープ\u00A9\u{}、たとえば\u{2F804}\x、たとえば\xA9\、たとえば\251良い点は、基本的な計算を直接行うことができることです:
let nuts = 7
more.innerHTML = `
<h2>You collected ${nuts} nuts so far!
<hr>
Double it, get ${nuts + nuts} nuts!!
`<div id="more"></div>これは、ファクトリ関数で非常に役立ちました。
function nuts(it){
return `
You have ${it} nuts! <br>
Cosinus of your nuts: ${Math.cos(it)} <br>
Triple nuts: ${3 * it} <br>
Your nuts encoded in BASE64:<br> ${btoa(it)}
`
}
nut.oninput = (function(){
out.innerHTML = nuts(nut.value)
})<h3>NUTS CALCULATOR
<input type="number" id="nut">
<div id="out"></div>