JavaScript 数组 Join

摘要：在本教程中，您将学习如何使用 JavaScript 数组 join() 方法将数组中的所有元素连接成一个由分隔符分隔的字符串。

JavaScript 数组 join() 方法简介

join() 方法允许您将 数组 中的所有元素连接起来，并返回一个新的 字符串

Array.prototype.join([separator])Code language: CSS (css)

join() 方法接受一个可选参数 separator，它是一个字符串，用于在结果字符串中分隔数组中每对相邻元素。

如果您不向 join() 方法传递 separator，则 separator 默认值为逗号。

如果数组只有一个元素，join() 方法会返回该元素作为字符串，而不使用 separator。

如果数组为空，则 join() 方法会返回一个空字符串。

当数组中的元素不是字符串时，join() 方法会在连接之前将它们转换为字符串。

请注意，join() 方法会将 undefined、null 和空数组 [] 转换为空字符串。

JavaScript 数组 join() 方法示例

让我们看一些使用 join() 方法的示例。

1) 使用 JavaScript 数组 join() 方法连接 CSS 类

以下示例使用 JavaScript 数组 join() 方法连接 CSS 类

const cssClasses = ['btn', 'btn-primary', 'btn-active'];
const btnClass = cssClasses.join(' ');

console.log(btnClass);Code language: JavaScript (javascript)

输出

btn btn-primary btn-active

在这个示例中，我们有一个数组，它保存着一组 CSS 类。我们使用 join() 方法将 cssClasses 数组中的所有元素连接起来，并返回一个由空格分隔的 CSS 类字符串。

2) 使用 JavaScript 数组 join() 方法替换字符串中的所有匹配项

此示例使用 JavaScript 数组 join() 方法 替换 空格 ' ' 的所有出现，用连字符 (-) 代替。

const title = 'JavaScript array join example';
const url = title.split(' ')
    .join('-')
    .toLowerCase();

console.log(url);Code language: JavaScript (javascript)

输出

javascript-array-join-exampleCode language: PHP (php)

工作原理

• 首先，使用 split() 字符串方法将 title 字符串按空格分割成数组。
• 其次，使用 join() 方法将结果数组中的所有元素连接成一个字符串。
• 第三，使用 toLowerCase() 方法将结果字符串转换为小写。

摘要

• 使用 JavaScript 数组 join() 方法将数组中的所有元素连接成一个由分隔符分隔的字符串。