用三元運算符連接 javascript 中的 HTML 字符串

Question

我正在嘗試使用 + 運算符連接 HTML 字符串，並且我正在使用三元運算符來檢查條件並在 div 元素中使用適當的 class 名稱，但是三元運算符給了我錯誤的 Z78E6221F6393D1456681DB398 我不知道我在這里錯過了什么。 誰能解釋一下？

我的代碼如下所示：

            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);
                })

運行此代碼時，我得到以下 output

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

我希望 output 應該是

<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">

Answer 1

+ 的運算符優先級(14) 高於條件運算符 (4)。 您當前的代碼相當於

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('');

Answer 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"}`);

Answer 3

問題是因為它無法正確解析。

更換你的

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

括號如下

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