模板文字格式/语法问题答案

【问题标题】：Template Literals formatting / syntax issue模板文字格式/语法问题
【发布时间】：2019-10-04 04:58:24
【问题描述】：

我正在苦苦挣扎，因为我已经使用 jQuery 运行了这个 for 循环，但我无法获得任何输出，我相信这是因为我的模板文字语法弄乱了我的代码。我不知道如何正确地写那行，我尝试了很多方法，但我无法让它正确地回来。感谢您的帮助！

let characterArray = ['a', 'b', 'c', 'd'] //test
let propertiesArray = ['abc', 'def', 'ghi'] //test

function data() {
    for (let i=0; i < characterArray.length; i++) {
        for(let j=0; j < propertiesArray.length; j++) {
            `$('#${characterArray[i]}').attr('data-${propertiesArray[j]}', 
            ${characterArray[i]}.${propertiesArray[j]})`;              
        }    
    }
}

【问题讨论】：

为什么要把整个 jQuery 语句放在模板字面量中？
你想达到什么目的？ for 循环中的内容不是语句，它只是一个字符串。
跟进@GhassenLouhaichi 所说的话。如果您控制台记录您在for 循环中拥有的内容，is 输出？console.log(`$('#${characterArray[i]}').attr('data-${propertiesArray[j]}', ${characterArray[i]}.${propertiesArray[j]})`);
我正在制作一个游戏，并且我有一系列对应于 div 的对象。我想将这些对象键作为数据插入到这些 div 中。

标签： jquery nested-loops template-literals

【解决方案1】：

JavaScript 模板文字是一种构造复杂/多行字符串的方法，而不是语句。您可以将它们合并到您的 jQuery 语句中，如下所示：

let characterArray = ['a', 'b', 'c', 'd'] //test
let properties = ['abc', 'def', 'ghi'] //test

function data() {
    for (let i=0; i < characterArray.length; i++) {
        for(let j=0; j < properties.length; j++) {
            $(`#${characterArray[i]}`).attr(
                `data-${properties[j]}`,
                `${characterArray[i]}.${properties[j]}`
            );              
        }    
    }
}

【讨论】：

【解决方案2】：

`$('#${characterArray[i]}').attr('data-${properties[j]}', ${characterArray[i]}.${properties[j]})`;

应该是

$(`#${characterArray[i]}`).attr(`data-${properties[j]}`, `${characterArray[i]}.${properties[j]}`);

要转换为字符串的每个部分都应该在模板中，而不是整个命令。

【讨论】：