ES2015では、タグ付きテンプレートリテラルを正しい順序でどのように再構成しますか？

Question

テンプレートリテラルのMDNドキュメントの例を使用して、カスタムの「タグ」関数を作成できます。

ここから

var a = 5; 
var b = 10; 

function tag(strings, ...values) { 
    console.log(strings[0]); 
    console.log(strings[1]); 
    console.log(values[0]); 
    console.log(values[1]); 

    return strings[0] + ' ' + values[0] + ' ' + strings[1] + ' ' + values[1]; 
} 

tag`Hello ${ a + b } world ${ a * b }`; 

、どのように我々は、それがvaluesとstringsとを混合したときに送られたのと同じ順序でメッセージを作成できますか？

tag`Hello ${ a + b } world ${ a * b }`; 
// swapped to 
tag`${ a + b } hello ${ a * b } world`; 

ドキュメント： https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals

Answer 1

strings.length常に一つ...values.lengthよりも大きくなる

上記タグ機能は、以下のようなスワップ値/列の順序は、場合順序を維持することができないであろう。 stringsの最初の値は、常に最初の置換までのテンプレート文字列の内容になります。置換がテンプレート文字列の最初の値である場合、strings[0]は空文字列です。テンプレート文字列の最後の値が置換文字の場合も同様です。strings[strings.length-1]は空の文字列です。

だからあなたの例では、strings[0]とstrings[1]あなたの出力は空の文字列がhelloなるが、worldのためのあなたは、出力決してstrings[2]。文字列に再結合する正しい方法は、最初のインデックスstringsを文字列に割り当ててから、すべての値をループして順に追加することです。

function tag(strings, ...values) { 
    var str = strings[0]; 
    for (i = 0; i < values.length; i++) { 
    str += values[i] + strings[i+1]; 
    } 

    return str; 
}