10种常见的JavaScript 字符串操作方法汇总

绝地灬酷狼 2022-09-09 11:54 283阅读 0赞

![034accf9396178cc5ce1225a9617e3c1.png][]

https://betterprogramming.pub/10-common-javascript-string-manipulation-methods-you-should-commit-to-memory-c75295eacc5f

翻译 | 杨小二

我们通常需要对字符串进行操作以显示所需的结果，这是前端必备的技能。需要字符串方法来进行验证、向最终用户显示正确的信息等等。

以下是你应该记住的一些字符串的操作方法。这样，你将不再需要一直搜索它们。我还将包括简单明了的示例，说明如何使用它们。

首先，了解一下JavaScript 字符串的背景。

JavaScript 字符串可以用单引号或双引号定义，如下所示：

const singleQuoteString = 'Hello';
    const doubleQuoteString = "Hello";

字符串是一个字符序列。将字符串视为字符数组会很有帮助。第一个字符是索引 0，然后是 1、2、3 等。

你经常需要使用这些索引和命令来分解、检索或更改字符串的某些部分。我还将在链接中提供每种方法的文档。

**01、str.length**

这个简单的命令返回字符串的长度，这在前端很常见，用于对文本字段输入进行数据验证、限制某些数据对象的长度等等。

let str = "matt";
    console.log(str.length); // this outputs 4

## **02、charAr(index)** ##

此函数将字符串视为字符数组。它检索你提供的索引处的字符。下面是一个例子：

let str = 'The cool programmer';
    console.log(str.charAt(0)); // this outputs T
    console.log(str.charAt(4)); // this outputs c

如果你需要检查字符串的一致性，这会很有帮助。字符串中的最后一个索引是 string.length — 1。

就像数组一样，始终记住字符串中的第一个索引是 0，而不是 1。这让我失望的次数比我想承认的要多。

**03、concat(string)**

此方法将两个字符串连接成一个。如果你需要将某些内容附加到字符串或组合它们，此方法可以派上用场。这是它的用途：

const string1 = 'clean ';
    const string2 = 'code'
    console.log(string1.concat(string2)); // This returns 'clean code'

老实说，我很少使用 concat 方法。我认为 JavaScript 模板字符串要干净得多；他们用更少的代码完成同样的事情。你还可以轻松地将字符串变量插入到另一个字符串中，而无需担心连接或索引。为此，你使用 \` 符号：

const string1 = 'clean';
    const string2 = 'code'
    const templateString = `${clean} ${code}`;
    console.log(templateString); // this prints out clean code

现在，这是干净的代码！

**04、includes(string)**

此函数检查字符串是否包含子字符串。下面是一个例子：

const str = 'hello world';
    console.log(str.includes('hello')); // true
    console.log(str.includes('word')); // false

就像许多这些方法一样，这有助于验证字符串是否包含用于验证目的的字符串中预期的字词或子字符串。

**05、match(regex string)**

“match”函数检查字符串是否与正则表达式匹配。正则表达式是一种字符模式，可用于验证字符串是否为特定格式。这通常可以用于前端的字段验证。假设你需要验证一个字符串是否只包含字母。下面是一个例子：

const firstName = "Matt";
    const badFirstName = "Matthew4";
    const nameRegex = /^[a-zA-Z]+$/
    console.log(firstName.match(nameRegex)); // True
    console.log(badFirstName.match(nameRegex)); // False

名字变量是有效的，因为它只包含字母。错误的名字变量失败，因为它有一个数字。

**06、replace（stringToBeReplaced，stringToAdd）**

此方法获取字符串中出现的字符并将其替换为另一个字符。也许用户在文本字段中输入了电话号码，并且必须添加破折号而不是空格。你可以这样做：

const userInput = '414 555 5656';
    console.log(userInput.replace(' ', '-')); // 414-555-5656

字符串中的空格将替换为破折号。这有助于转换字符串以适合你需要的数据格式。

## **07、split(string)** ##

有时，你可能需要根据某个字符或其他字符串拆分字符串。此函数返回一个子字符串数组。下面是一个用空格分割字符串的例子：

const hello = "Hello World";
    const helloWorldSplit = hello.split(' ');
    console.log(helloWorldSplit); // ["Hello", "World"];
    console.log(helloWorldSplit[0]); // "Hello"

拆分后，你可以像访问数组一样访问新字符串。

**08、substring(index, index)**

有时，你必须在某个索引或索引范围处拆分字符串。对于这个函数，你传入你想要开始的元素的索引，以及你想要子字符串结束的字符串中的索引。下面是一个例子：

const hello = 'Hello World';
    console.log(hello.substring(1, 4)); // ell

警告：注意它，如何不打印子字符串 4 处的字符。当 4 作为第二个参数提供时，它只打印索引 1-3 的字符。end 参数是停止点，不包含在子字符串中。

**09、toLowercase()/toUppercase()**

这些方法接受一个字符串并将其转换为全部大写或全部小写。如果你想确保你正在查看的字符串不区分大小写，这会很有帮助。

const firstName = "Matt";
    console.log(firstName.toUpperCase()); // MATT

在进行验证检查时将所有字符串转换为大写或小写并不是一个坏主意，以确保当数据不区分大小写时，应用程序按预期运行。

**10、trim()**

此方法是文本字段输入的另一种常见方法。它从任何字符串中删除空格。如果用户输入以空格结尾的内容，这通常是一个有用的调用函数。在字符串末尾留一个空格可能会导致字段验证和其他功能失效。

const stringWithSpace = 'John ';
    console.log(stringWithSpace.trim()); // this will be 'John'

我要学习的字符串方法列表到此结束。我希望你可以在你的项目中使用其中的一些。

感谢你的阅读！

**学习更多技能**

**请点击下方公众号**

![cc584c92d9c83583d1f17eb4e8b1d279.gif][]

![d96e8a8b39e03bb8fe1023f17fb3b8f3.png][]

![c254c0884e85a38720251cb4b5dbd0a0.png][]

[034accf9396178cc5ce1225a9617e3c1.png]: /images/20220829/4448f2cc63864fbc8f7fb4e0bb5fea12.png
[cc584c92d9c83583d1f17eb4e8b1d279.gif]: /images/20220829/2525280a605249488a837e2972a50af0.png
[d96e8a8b39e03bb8fe1023f17fb3b8f3.png]: /images/20220829/83a9d244b1a34d87937b64ac80cb937c.png
[c254c0884e85a38720251cb4b5dbd0a0.png]: /images/20220829/5920db99fdb9432594b3b6ecc8190fd8.png