在 JavaScript 中过滤字符串

当前位置：主页 > 学无止境 > WEB前端 > JavaScript >

Vue React JavaScript Angular CSS HTML

在 JavaScript 中过滤字符串

作者：迹忆客最近更新：2023/06/04 浏览次数：

在处理范围广泛的字符串数组元素并提取优选匹配项时，我们可以依赖多种方法。 JavaScript 的基本 filter() 方法启动该过程，稍后我们可以根据喜好选择其他方法。

我们必须注意 find() 和 findIndex() 方法等其他约定也可以获取匹配项。但是这些函数只返回匹配字符串的索引个数；这些不能返回要用数组字符串检查的给定模式的序列。

此外，这些可以与其他条件一起使用和调整以检索匹配的序列。

在这里，我们将演示使用具有基本箭头操作和特定条件的 filter() 方法。此外，我们将看到使用 indexOf()、test() 和 include() 方法来获取满足给定模式的字符串。

并非所有这些方法都直接返回字符串。因此，我们将它们与 filter() 方法合并以跟踪数组元素。

使用带箭头函数的 filter() 方法在 JavaScript 中过滤字符串

在这种情况下，我们将选择一个包含字符串元素的数组。 filter() 方法将遍历每个元素并查看条件是否与使用箭头函数应用的条件相匹配。

在这里，任务只需要几行代码。让我们检查一下。

代码片段：

var myArray = ["abadef", "sbade", "psadbe"]
filtered = myArray.filter(x => x.length<=5)
console.log(filtered)

输出:

将 filter() 方法与箭头函数一起使用

可以看出，我们添加了限制，只有长度小于或等于5的字符串元素才会被选中。并根据该规范导出输出。

使用 indexOf() 方法和 filter() 方法在 JavaScript 中过滤字符串

我们将处理具有多个字符串元素的相同分类字符串数组。在这种情况下，我们将选择一个我们想要与给定字符串匹配的字符串模式，无论哪个字符串是该模式的超集都是目标字符串元素。

indexOf() 方法通常返回要在其中找到模式的字符串的索引。但在这种情况下，我们将字符串作为数组元素，因此，无论匹配哪个元素，函数都会从元素字符位置的开头开始计算索引。

虽然我们在示例中只显示了选定的元素，但您可以尝试重新检查单词。

代码片段：

var myArray = ["abadef", "sbade", "psadbe"]
var PATTERN = 'sad',
   filtered = myArray.filter(function (str)
                             {return str.indexOf(PATTERN) !== -1; });
console.log(filtered)

输出:

使用 indexOf() 方法和 filter() 方法

使用 test() 方法和 filter() 方法在 JavaScript 中过滤字符串

JavaScript 中的 test() 函数返回 true 或 false。当我们将该方法与 filter() 方法合并时，我们得到匹配的字符串元素作为过滤对象的新元素。

此外，值得注意的部分是 test() 方法将 RegExp 与元素匹配。

代码片段：

var myArray = ["abadef", "sbade", "psadbe"]

var PATTERN = /bad/,
filtered = myArray.filter(function (str) { return PATTERN.test(str); });
console.log(filtered)

输出:

使用 test() 方法和 filter() 方法

在 JavaScript 中使用 includes() 方法和 filter() 方法过滤字符串

在这里，includes() 方法以布尔形式返回，但在这种情况下，匹配模式可以是字符串而不是正则表达式。同样，我们将使用 filter() 方法遍历数组元素并获取接受的案例。

那么，让我们跳到代码围栏。

代码片段：

var myArray = ["abadef", "sbade", "psadbe"]

var PATTERN = 'ef',
filtered = myArray.filter(function (str) { return str.includes(PATTERN); });
console.log(filtered)