JavaScriptのテンプレートの例

Question

スコット・アレンによって書かれたデモです：

var x = 1; 
 
var y = 3; 
 
var upper = function (string, ...values) { 
 
    var result = ''; 
 
    for (let i = 0; i < string.length; i++) { 
 
    \t result += string[i]; 
 
    if (i < values.length) { 
 
    \t result += values[i] 
 
    } 
 
    } 
 
    console.log('string', string) 
 
    console.log('values', values) 
 
    return result.toUpperCase() 
 
}; 
 
var result = upper `${x} + ${y} is ${x + y}` 
 
console.log(result)

は私の質問：どのようにJavascriptを

${x} + ${y} is ${x + y}を経由して、配列の文字列と配列の値を検出していますか？

それはですか：${x} + ${y} is ${x + y}を分割し、${}の外にある部品を選択しますか？

第2の質問：${x} + ${y} is ${x + y}を(),stringおよびvaluesに変更しましたが、最初の例と同じ結果になりました。正しい構文ですか？この場合、()を使用しないでください。

var x = 1; 
 
var y = 3; 
 
var upper = function (string, ...values) { 
 
    var result = ''; 
 
    for (let i = 0; i < string.length; i++) { 
 
    \t result += string[i]; 
 
    if (i < values.length) { 
 
    \t result += values[i] 
 
    } 
 
    } 
 
    console.log('string', string) 
 
    console.log('values', values) 
 
    return result.toUpperCase() 
 
}; 
 
var result = upper (`${x} + ${y} is ${x + y}`) 
 
console.log(result)

P/S：私は、キーワードjavascript templateとGoogle検索で検索しましたが、何の文書では、それについて言及していません。

Answer 1

p/s：Google検索でキーワード検索のjavascriptテンプレート を検索しましたが、記載されているドキュメントはありません。

は、検索用語を使用してTemplate literals

テンプレートリテラルが埋め込まれた表現を可能文字列リテラルです。試してみてください 複数行の文字列と文字列補間機能を で使用できます。テンプレートリテラルと

、あなたはこのより読みやすいように構文 砂糖作りの置換を利用することができます：

var a = 5; 
var b = 10; 
console.log(`Fifteen is ${a + b} and\nnot ${2 * a + b}.`); 
// "Fifteen is 15 and 
// not 20." 

Answer 2

これはリテラルテンプレートとして知られているECMAScriptの2015の新機能です 。バッククォートで区切られたストリングで、JavaScript内にJavaScript式を入れることができます。通常、これらの式は評価され、文字列に補間されます。ただし、テンプレートリテラルの直前に関数名を指定することで、その関数を使用してカスタム結果を作成することができます。例：

var name = "Bob"; 
`Hello, ${name}!` 
// prints "Hello, Bob!" 

function ignoreValues(strings, values) { 
    // strings is array of original string, split at ${} points 
    // values is array of evaluated result of expressions within ${} 
    // both arrays are in order, so you can go back and forth between their elements 
    return strings.join(''); 
} 

ignoreValues`Hello, ${name}!` 
// prints "Hello, !" 

documentationを参照してください。