在 JavaScript 中将数组转换为不带逗号的字符串

作者

在 JavaScript 中将数组转换为不带逗号的字符串

Convert Array to String without Commas in JavaScript

使用该Array.join()方法将数组转换为不带逗号的字符串，例如const withoutCommas = arr.join('');.

该join()方法将返回一个字符串，其中包含由提供的分隔符连接的所有数组元素。

索引.js
const arr = ['bobby', 'hadz', '.com'];

const withoutCommas = arr.join('');
console.log(withoutCommas); // 👉️ 'bobbyhadz.com'

console.log(typeof withoutCommas); // 👉️ string

Array.join
()
方法使用分隔符连接数组中的所有元素。

该Array.join()方法采用的唯一参数是separator– 用于分隔数组元素的字符串。

如果separator省略参数值，则数组元素用逗号连接,。

如果separator参数设置为空字符串，则数组元素之间没有任何字符连接。

如果您的用例要求您连接具有不同字符的数组元素，请将该字符作为参数传递给该Array.join()方法。

索引.js
const arr = ['bobby', 'hadz', 'com'];

const withSpaces = arr.join(' ');
console.log(withSpaces); // 👉️ 'bobby hadz com'

const withDashes = arr.join('-');
console.log(withDashes); // 👉️ 'bobby-hadz-com'

const withCommaAndSpace = arr.join(', ');
console.log(withCommaAndSpace); // 👉️ 'bobby, hadz, com'

const withoutCommas = arr.join('');
console.log(withoutCommas); // 👉️ 'bobbyhadzcom'

如果join在空数组上调用该方法，将返回一个空字符串。

索引.js
console.log([].join('')); // 👉️ ''

如果数组包含或空数组的元素undefined，它们将转换为空字符串。null[]

索引.js
console.log(['a', 'b', null].join('')); // 👉️ 'ab'

对于大多数用例，此行为非常有效。

如果要在调用该方法之前从数组中删除null和值，请使用该方法。undefinedArray.join()Array.filter()

索引.js
const arr = [null, 'bobby', undefined, 'hadz', null, 'com'];

const newArray = arr.filter(element => {
  return element !== null && element !== undefined;
});
console.log(newArray); // 👉️ [ 'bobby', 'hadz', 'com' ]

const str = newArray.join('');
console.log(str); // 👉️ bobbyhadzcom

The function we passed to the
Array.filter()
method gets called with each element in the array.

On each iteration, we check if the current element is not equal to null and
undefined and return the result.

The filter() method returns a new array that only contains the elements that
meet the condition.

If you have to do this often, extract the logic into a reusable function.

index.js
function toStringWithoutCommas(array, separator = '') {
  return array
    .filter(element => {
      return element !== null && element !== undefined;
    })
    .join(separator);
}

const arr = [null, 'bobby', undefined, 'hadz', null, 'com'];

const str1 = toStringWithoutCommas(arr);
console.log(str1); // 👉️ "bobbyhadzcom"

const str2 = toStringWithoutCommas(arr, '-');
console.log(str2); // 👉️ "bobby-hadz-com"

The function takes an array and optionally a separator and converts the array to
a string without commas.

Convert an array to a string without commas using String.replaceAll() #

To convert an array to a string without commas:

  1. Use the Array.map() method to iterate over the array.
  2. Use the replaceAll() method to remove all commas from each array element.
  3. Use the Array.join() method to join the array to a string without commas.
index.js
const arr = ['bo,bby', 'ha,dz', 'c,om'];

const str = arr
  .map(element => {
    return element.replaceAll(',', '');
  })
  .join('');

console.log(str); // 👉️ bobbyhadzcom

The function we passed to the
Array.map
method gets called with each element in the array.

On each iteration, we use the String.replaceAll() method to remove all commas
from the string and return the result.

The map() method returns a new array containing the values returned from the
callback function.

index.js
const arr = ['bo,bby', 'ha,dz', 'c,om'];

// 👇️ [ 'bobby', 'hadz', 'com' ]
console.log(
  arr.map(element => {
    return element.replaceAll(',', '');
  }),
);

The
String.replaceAll()
method returns a new string with all matches of a pattern replaced by the
provided replacement.

The method takes the following parameters:

Name Description
pattern The pattern to look for in the string. Can be a string or a regular expression.
replacement A string used to replace the substring match by the supplied pattern.

该String.replaceAll()方法返回一个新字符串，其中替换了模式的匹配项。该方法不会更改原始字符串。

最后一步是使用该Array.join()方法将数组连接成不带逗号的字符串。

索引.js
const arr = ['bo,bby', 'ha,dz', 'c,om'];

const str = arr
  .map(element => {
    return element.replaceAll(',', '');
  })
  .join('');

console.log(str); // 👉️ bobbyhadzcom

我们加入了没有分隔符的数组元素，但您可以使用任何其他值。

–