堆棧內存溢出
  簡體   English   中英

如何在 html 中顯示 javascript 數組中的所有項目，除了最后一項外，它們之間用逗號分隔

[英]How to display all items from a javascript array in html with commas in between them except the last item

 原文  2022-04-13 05:02:16  1   5    javascript/ html

問題描述

我必須使用 for 循環或 while 循環。 如何在不包含逗號的情況下包含數組中的最后一項？ 下面我有打印數組中除最后一項之外的所有項目的代碼。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" type="text/css" href="coffee.css" />
    <title>Coffee</title>
  </head>
  <body>
   
    <section class="javascript">
      <h3>Drinks of the Month</h3>
      <p id="drinks"></p>
    </section>

    <script>
      var drinks = [
        "Chai Tea",
        "Sweet Cream Cold Brew",
        "Caramel Macchiato",
        "Vanilla Latte",
      ];

      var i = 0;
      var drinksOfMonth = "";
      while (i < drinks.length - 1) {
        drinksOfMonth += drinks[i] + ", ";
        i++;
      }


      document.getElementById("drinks").innerHTML = drinksOfMonth;
    </script>
  </body>
</html>

5 個解決方案

解決方案1
 0  2022-04-13 05:06:22

只需使用數組的join()方法即可。

例子

const foo = ['tea', 'coffee', 'soda'];

console.log(foo.join('-'));
console.log(foo.join(', ');

您可以在此處閱讀有關 Array.join() 的更多信息https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/join

解決方案2
 0  2022-04-13 05:06:46

這將做到：

var drinks = [
  "Chai Tea",
  "Sweet Cream Cold Brew",
  "Caramel Macchiato",
  "Vanilla Latte",
]

drinks.join(', ')

請問output：

Chai Tea, Sweet Cream Cold Brew, Caramel Macchiato, Vanilla Latte

解決方案3
 0  2022-04-13 05:11:38

你也可以這樣做

while (i < drinks.length) { 
  if(i != drinks.length-1){
    drinksOfMonth += drinks[i] + ", "}
  else{
    drinksOfMonth += drinks[i]}
 i++ 
}

解決方案4
 0  2022-04-13 05:26:06

我必須使用 for 循環或 while 循環。 如何在不包含逗號的情況下包含數組中的最后一項？

為什么要使用 for 或 while 循環，因為您可以使用Array.join()方法通過一行代碼輕松實現此要求。

演示： 

 var drinks = [ "Chai Tea", "Sweet Cream Cold Brew", "Caramel Macchiato", "Vanilla Latte", ]; console.log(drinks.join(', '));

解決方案5
 0  2022-04-13 05:37:46

只需在 while 循環之后添加最后一項：

drinksOfMonth += drinks[drinks.length-1];

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 如何顯示從最后一項到第一項的數組項？ 如何動態顯示從 Javascript 到 HTML 的對象數組中的所有項目？ JavaScript foreach 一個數組並用逗號分隔它們，最后一個逗號用“and” 如何在JavaScript中將項目插入數組並在div中顯示它們 Firebase JavaScript - 數組中的映射值僅顯示最后一項 如何刪除除最后5個以外的所有html標簽？ 如何在javascript中顯示帶有數組項的div Map方法影響除最后一個數組項之外的所有項 如何獲取數組的最后一項並在JavaScript中從數組中刪除它？ 如何從數組中刪除除 javascript 中第一個元素之外的所有元素
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM