了解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!"

“*当我在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!"

答

模板是由我们定义来分析模板字符串的自定义功能，每当函数用于分析模板字符串
第一标记函数的参数包含一个字符串值数组。其余的参数与表达式有关。
所以在这里，我们已经写了函数给那个给定的输出
我有困惑，因为当在forEach里面检查的键时，我在控制台中得到了一个函数，但在forEach之前检查函数给了键作为可配置字符串数组$ { 0}和$ {1}

了解ES6标记的模板文字

相关推荐