拆分字符串删除 JavaScript 中的任何空元素

作者

拆分一个字符串，删除 JavaScript 中的任何空元素

Split a String removing any Empty Elements in JavaScript

要拆分字符串并从数组中删除空元素：

  1. 使用该split()方法获取子字符串数组。
  2. 使用该filter()方法从数组中删除空元素。
  3. 该filter方法将返回一个没有空元素的新数组。
索引.js
const str = ' bobby   hadz com ';

const arr = str.split(' ').filter(element => element);
console.log(arr); // 👉️ [ 'bobby', 'hadz', 'com' ]

String.split ()
方法接受一个分隔符，并在每次出现所提供的分隔符时将字符串拆分为一个数组。

该String.split()方法采用以下 2 个参数：

姓名 描述
分隔器 描述每个拆分应该发生的位置的模式。
限制 一个整数，用于指定要包含在数组中的子字符串数的限制。

该方法返回一个子字符串数组。

索引.js
const str = ' bobby   hadz com ';

// 👇️ [ '', 'bobby', '', '', 'hadz', 'com', '' ]
console.log(str.split(' '))

我们传递给Array.filter方法的函数

会针对数组中的每个元素进行调用。

在每次迭代中，我们按原样返回字符串。

这是可行的，因为该filter方法返回一个新数组，其中仅包含回调函数返回的真实元素。

JavaScript 中的假值是：false, null, undefined, 0, ""
（空字符串），NaN（不是数字）。

所有其他值都是真实的。

由于空字符串是虚假值，因此不会将它们添加到新数组中。

我们将一个字符串拆分成一个数组，所以我们知道该数组将只包含字符串。

只有空字符串是假值。

所以我们不需要处理任何边缘情况，例如包含其他虚假值的数组，比如0.

另一种方法是将Boolean()构造函数传递给filter()
方法。

使用 Boolean() 拆分字符串删除任何空元素

这是一个三步过程：

  1. 使用该split()方法将字符串拆分为数组。
  2. 调用filter()数组上的方法。
  3. Boolean()将构造函数作为参数传递给filter()方法。
索引.js
const str = ' bobby  hadz  com ';

const arr = str.split(' ').filter(Boolean);
console.log(arr); // 👉️ [ 'bobby', 'hadz', 'com' ]

构造Boolean()函数获取一个值并将其转换为其布尔表示形式。

索引.js
console.log(Boolean('hello')); // 👉️ true
console.log(Boolean(' ')); // 👉️ true
console.log(Boolean('')); // 👉️ false
在每次迭代中，字符串都会传递给Boolean() 构造函数，转换为其布尔表示形式并返回。

所有空字符串的计算结果false都不会添加到新数组中。

拆分一个字符串，使用删除任何空元素match

如果你在一个空间上分裂，你也可以使用这个String.match()方法。

索引.js
const str = ' bobby hadz   com ';

const arr = str.match(/\S+/g)
console.log(arr) // 👉️ [ 'bobby', 'hadz', 'com' ]

String.match方法将字符串与正则表达式进行匹配。

该方法返回一个包含匹配项（如果有）或未null找到匹配项的数组。

我们向该match方法传递了一个正则表达式。

正斜杠标记/ /正则表达式的开始和结束。

该\S字符匹配除空格以外的任何单个字符。

加号+与前面的项目（任何非空白字符）匹配 1 次或多次。

我们使用g(global) 标志是因为我们想要匹配所有出现的非空白字符，而不仅仅是第一次出现的。

就其整体而言，正则表达式匹配一个或多个非空白字符。

可以使用相同的方法拆分其他字符并删除空元素。

索引.js
const str = ',bobby,hadz,com,';

const arr = str.match(/[^,]+/g)
console.log(arr) // 👉️ [ 'bobby', 'hadz', 'com' ]

代码示例以逗号分隔。

正则表达式中的方括号称为字符类[]。

插入^符号表示“不是以下内容”。

正则表达式匹配一个或多个不是逗号的连续字符。

数组中不包含空元素，因为逗号根本不匹配。

额外资源

您可以通过查看以下教程来了解有关相关主题的更多信息：