javascript中HTML字符串与三元运算符的连接答案

【问题标题】：Concatenation of HTML string in javascript with ternary operatorjavascript中HTML字符串与三元运算符的连接
【发布时间】：2020-07-23 01:08:09
【问题描述】：

我正在尝试使用 + 运算符连接 HTML 字符串，并且我正在使用三元运算符来检查条件并在 div 元素中使用适当的类名，但是三元运算符给了我错误的输出。我不知道我在这里错过了什么。谁能解释一下？

我的代码如下所示：

            fetch("./data/projects.json")
                .then(res => {
                    return res.json();
                })
                .then(jsonResponse => {
                    var carouselItem = ''

                    jsonResponse.data.map((image, index) => {
                        carouselItem += '<div class="carousel-item ' + index === 0 ? 'a' : 'b' + '">'
                    })

                    console.log(carouselItem);
                })
                .catch(err => {
                    console.log(err);
                })

我在运行这段代码时得到以下输出

b">b">b">b">b">

我希望输出应该是

<div class="carousel-item a"><div class="carousel-item b"><div class="carousel-item b"><div class="carousel-item b"><div class="carousel-item b">

【问题讨论】：

标签： javascript html string-concatenation

【解决方案1】：

+ 比条件运算符 (4) 具有 higher operator precedence (14)。您当前的代码相当于

carouselItem += ('<div class=carousel-item>' + index === 0) ? 'a' : 'b'

不仅比较错误，分配也错误。改为：

carouselItem += '<div class="carousel-item ' + (index === 0 ? 'a' : 'b') + '"> </div>';

以便正确分组条件。您可能还想结束您开始的<div。此外，.map 仅应在您要创建新数组时使用。如果只需要副作用，请使用forEach。

jsonResponse.data.forEach((image, index) => {
  carouselItem += '<div class="carousel-item ' + (index === 0 ? 'a' : 'b') + '"> </div>';
});

如果您愿意，可以在此处使用.map，但如果需要，请返回您想要的<div>，然后将其合并：

const carouselItem = jsonResponse.data.map((image, index) => (
  '<div class="carousel-item ' + (index === 0 ? 'a' : 'b') + '"> </div>'
))
  .join('');

【讨论】：

【解决方案2】：

将三元括在括号中以使其成为单独的语句并防止+ 优先（请参阅@CertainPerformance 的答案），或使用模板字符串：

const strA = "hello";
const strB = " world";
console.log(strA + 1 === 1 ? strB : "nope");
console.log(strA + (1 === 1 ? strB : "nope"));
console.log(`${strA}${1 === 1 ? strB : "nope"}`);

【讨论】：

【解决方案3】：

问题是因为它无法正确解析。

更换你的

carouselItem += '<div class=carousel-item>' + index === 0 ? 'a' : 'b'

如下方括号

carouselItem += '<div class=carousel-item>' + ((index === 0) ? 'a' : 'b')

【讨论】：