JavaScript >> Javascript 文檔 >  >> Tags >> string

如何在 JavaScript 中使用 toString() 和 join() 將數組轉換為字符串

這個簡短的教程將向您展示使用 toString() 和 join() 方法將 JavaScript 數組轉換為字符串的兩種方法。

什麼是數組?

數組是包含多個值的數據結構。它就像一個編號列表 - 數組中的每個項目都有一個值和一個位置(稱為 索引 )。 索引 從位置 0 開始計數 ,因此數組中的第一項位於索引 0 ,第二個在索引 1 等等。

在 JavaScript 中將數組轉換為字符串

您可能希望將數組轉換為字符串的原因有很多。最常見的情況是,您可能只想在網頁上將數組及其內容顯示為純文本。

JavaScript 數組可以包含任何類型 值 - 字符串、數字、對象 - 因此在將數組轉換為字符串時,您需要記住數組中的值在轉換後的外觀。

數組 toString() 方法

toString() 方法返回數組及其內容的字符串表示形式。

語法如下:

array.toString()

注意:

  • 數組 可以是任何數組變量
  • 將返回數組的字符串表示形式
  • 數組中的值將以逗號分隔 在結果字符串中
  • 原始的數組 不會通過調用 toString() 進行修改

數組 toString() 示例

var myArray = ["dog", "cat", "mouse"];
var myString = myArray.toString();
console.log(myString);

上面的代碼會在控制台輸出以下內容:

dog,cat,mouse

請注意,數組值已由 逗號 分隔 .

下面,幾種不同類型的變量在將其轉換為字符串之前存儲在數組中,以查看這些對象的字符串表示形式:

var myArray = ["bird", 1, false, new Date(), {foo: "bar"}];
var myString = myArray.toString();
console.log(myString);

哪個會輸出:

bird,1,false,Wed Nov 10 2021 22:02:23 GMT+0000 (Greenwich Mean Time),[object Object]

請注意,字符串和數值看起來與預期一樣,並且布爾值也已轉換為文本。

更有趣的是數組中的最後兩項。

日期 對像有它自己的toString() 內置方法,調用該方法將其轉換為字符串以包含在字符串化數組中。

通用對象 ({foo:“bar”} ) 沒有 toString() 方法——因此它的字符串表示是一個通用的對象標識符。

數組 join() 方法

join() 方法的工作原理類似於 toString() 方法,同時允許您有選擇地指定將使用哪個字符來分隔結果字符串中的數組項。

語法如下:

array.join(SEPARATOR)

注意:

  • 數組 可以是任何數組變量
  • 將返回數組的字符串表示形式
  • 數組中的值將以逗號分隔 在結果字符串
    • 除非可選的 SEPARATOR 已定義
  • 原始的數組 不會通過調用 join() 進行修改

數組 join() 示例

var myArray = ["dog", "cat", "mouse"];
var myString = myArray.join();
console.log(myString);

上面的代碼會在控制台輸出以下內容:

dog,cat,mouse

注意默認的逗號分隔 價值觀。您可以指定不同的分隔符(或不指定分隔符):

var myArray = ["dog", "cat", "mouse"];
var myString = myArray.join('-');
console.log(myString);

哪個會返回:

dog-cat-mouse

或者,沒有分隔符(用空字符串指定):

var myArray = ["dog", "cat", "mouse"];
var myString = myArray.join('');
console.log(myString);

哪個會返回:

dogcatmouse

處理非字符串值時的行為與 toString() 相同 ,如上概述:

var myArray = ["bird", 1, false, new Date(), {foo: "bar"}];
var myString = myArray.join();
console.log(myString);

這導致以下輸出:

bird,1,false,Wed Nov 10 2021 22:02:23 GMT+0000 (Greenwich Mean Time),[object Object]

Tutorial JavaScript 教程
  1. 如何連接來自多個 JavaScript 對象的屬性

  2. 下一篇:VS Code、Docker 和傳送到雲端

  3. 當從 node_modules 導入一個在 create-react-app 中使用基於路由的延遲加載的模塊時,代碼拆分是否應該以相同的方式工作?

  4. 用 JavaScript 構建一個簡單的國際象棋 AI

  5. React - 什麼是自定義鉤子

  6. 如何將選框標籤豎直放置?

  7. 嘗試鋼包 - 故事書替代品

  1. 如何在 node.js 中編寫 CLI

  2. 學習 Deno:安全的 JavaScript 和 TypeScript 運行時

  3. 使用 nodeJS 的服務器端事件

  4. 下一個 React 應用的 7 個 Webpack 插件

  5. 點擊展開卡片元素

  6. 使用 Intersection Observer 響應粘性事件

  7. 網絡簡史

  1. 跳過本地開發的 Auth0 同意提示

  2. JavaScript 測驗:這個函數有什麼作用?

  3. 使用代碼拆分加速您的 Angular 應用程序

  4. 如何使 nuxt auth 與 JWT 一起工作 - 權威指南