瞭解ES6標記的模板文字

下面的代碼片段用於Mozilla（https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals）以解釋Tagged Template literal，請幫我理解下面的函數正在做什麼，我無法獲得該函數的實際流程，因爲他們已經使用了keys.foreach和當我在Chrome檢查，鑰匙是一個功能，所以無法理解瞭解ES6標記的模板文字

function template(strings, ...keys) { 
    return (function(...values) { 
    var dict = values[values.length - 1] || {}; 
    var result = [strings[0]]; 
    keys.forEach(function(key, i) { 
     var value = Number.isInteger(key) ? values[key] : dict[key]; 
     result.push(value, strings[i + 1]); 
    }); 
    return result.join(''); 
    }); 
} 

var t1Closure = template`${0}${1}${0}!`; 
t1Closure('Y', 'A'); // "YAY!" 
var t2Closure = template`${0} ${'foo'}!`; 
t2Closure('Hello', {foo: 'World'}); // "Hello World!"

來源

2017-09-14 Akshay Vijay Jain

「*當我在Chrome檢查，按鍵是功能*」 - 沒有。 'keys'是一個數組。 – Bergi

是的，鍵是一個數組，但不知何故，當我問的問題，我檢查了鍵，當調試器是在forEach裏面，那時你不能訪問鍵數組，如果你鍵入鍵，你會在控制檯得到一個功能 –

嗯只是寫一個標準的'for（let i = 0; i Bergi

該示例中的大部分複雜性來自重載函數和forEach調用，而不是來自已標記的模板文字。它可以更好地被寫成兩個不同的案件：

function dictionaryTemplate(strings, ...keys) { 
    return function(dict) { 
    var result = ""; 
    for (var i=0; i<keys.length; i++) 
     result += strings[i] + dict[keys[i]]; 
    result += strings[i]; 
    return result; 
    }; 
} 
const t = dictionaryTemplate`${0} ${'foo'}!`; 
t({0: 'Hello', foo: 'World'}); // "Hello World!"

function argumentsTemplate(strings, ...keys) { 
    is (!keys.every(Number.isInteger)) 
    throw new RangeError("The keys must be integers"); 
    return function(...values) { 
    var result = ""; 
    for (var i=0; i<keys.length; i++) 
     result += strings[i] + values[keys[i]]; 
    result += strings[i]; 
    return result; 
    }; 
} 
const t = argumentsTemplate`${0}${1}${0}!`; 
t('Y', 'A'); // "YAY!"

來源

2017-09-14 11:51:24 Bergi

模板是由我們定義來分析模板字符串的自定義功能，每當函數用於分析模板字符串
第一標記函數的參數包含一個字符串值數組。其餘的參數與表達式有關。
所以在這裏，我們已經寫了函數給那個給定的輸出
我有困惑，因爲當在forEach裏面檢查的鍵時，我在控制檯中得到了一個函數，但在forEach之前檢查函數給了鍵作爲可配置字符串數組$ { 0}和$ {1}

來源

2017-09-14 11:44:54

瞭解ES6標記的模板文字

回答

相關問題