每个人都必须知道的 10 个 JavaScript 字符串方法

本文最初发布在我的博客上。请访问inspiredwebdev.com获取更多文章和教程。

大家好，我是 Alberto Montalesi，一位自学成才的全栈开发者。我在我的网站inspiredwebdev.com上创建实用的 JavaScript 教程和课程，旨在激励其他开发者成长，实现他们理想的职业发展。

string是一种JavaScript用于表示字符序列的原始类型。
它们用于存储各种信息，例如姓名、产品描述等等。当然，最好不要存储密码！

在本文中，我们将介绍 10 种 String 方法，一旦您开始使用，您就会发现自己几乎每天都会使用这些方法JavaScript。

在本文的末尾，您将找到一个链接，可以下载一组抽认卡，随身携带并复习本文讨论的概念。

如果你不太熟悉，JavaScript你可能会好奇为什么string（原始类型）和String.方法名要用两种不同的大小写形式。答案是，小写指string的是原始类型，而大写指String的是全局对象，我们可以在全局对象上调用一些内置方法。

string原始值和对象之间的转换String是自动完成的，这就是为什么您不必编写如下代码：

const primitiveString = 'Alberto';

const str = new String([primitiveString]);
str.length; // 7

这里我们根据原始字符串创建一个新String对象，但是由于 JavaScript 会自动进行转换，所以我们可以String直接在原始字符串上调用方法，如下所示：

const primitiveString = 'Alberto';
primitiveString.length; // 7

现在我们已经介绍了一些基础知识，让我们开始研究一些有用的方法。

String.prototype.indexOf()

返回我们指定为参数的值在调用对象中第一次String.prototype.indexOf()出现的索引。String

const str = "Watermelon";
str.indexOf("melon"); // 5
const str2 = "My dog is named boo. My dog is 7 years old";
str2.indexOf('dog'); // 3
const str3 = "My DOG is named boo. My dog is 7 years old";
str3.indexOf('dog'); // 24

在第二个中String，“dog”这个词出现了两次，但只返回第一次indexOf()出现的索引。

在第三个中，String您将看到“DOG”现在是大写的，因此结果从“3”更改为“24”，因为该indexOf()方法区分大小写。

String.protoype.includes()

该String.protoype.includes()方法与前一种方法类似，用于在一个字符串中查找另一个字符串，但它不会返回该字符串的索引，而只是一个布尔值，表示第一个字符串是否可以在第二个字符串中找到。

const str = "Watermelon";
str.includes("melon"); // true
const str2 = "WATERMELON";
str2.includes("melon"); // false

如您所见，此方法也区分大小写，返回我们false在大写字母“WATERMELON”中寻找小写字母“melon”的位置。

由于这两种方法非常相似，您可能想知道为什么应该使用其中一种，而答案只是选择最适合您要实现的目标的方法。

您是否需要知道字符串 B 在字符串 A 中的索引位置？请使用indexOf()。相反，您是否只是检查字符串 B 是否存在于字符串 A 中？您可以使用类似这样的代码：但为了使代码更清晰，a.indexOf(b) !== -1您应该直接使用。includes()

String.protoype.startsWith() / String.protoype.endsWith()

这两种方法是 ECMAScript 2015（ES6）规范中添加的，用于确定一个字符串是否以指定的一组字符开始或结束，并适当地true返回false。

与上面两种方法类似，这两种方法也区分大小写

两种方法都可以接受两个参数，第一个参数相同，均为字符串。第二个参数有所不同：

• startsWith()可以接受一个可选参数，指示从哪里开始搜索字符串。默认值为 0
• endsWith()可以接受一个可选参数，指示要检查的原始字符串的长度。默认为字符串的长度。

让我们看看以下示例startsWith()

const str = "Watermelon";
str.startsWith('Water'); // true
str.startsWith('Water', 1); // false
str.startsWith('melon',5 ) // true
str.startsWith('lon',7 ) // false

让我们分解一下代码：

• str.startsWith('Water');返回true，因为“Watermelon”在开头包含字符串“Water”
• str.startsWith('Water', 1);返回false，因为用作检查基础的字符串是从索引 1 开始的原始字符串，等于 'atermelon'
• str.startsWith('melon',5 )并且str.startsWith('lon',7 )都返回，true因为我们用来检查的字符串是从索引 5 和索引 7 开始的原始字符串，分别等于“melon”和“lon”。

现在让我们看一些例子endsWith()：

const str = "Watermelon";

str.endsWith('melon'); // true
str.endsWith('me', 7) // true
str.endsWith('melon', 8) // false

让我们分解一下代码：

• str.endsWith('melon')返回true，因为“Watermelon”以“melon”结尾
• str.endsWith('me', 7)返回，true因为我们只检查字符串的前 7 个字符，这反过来将其从“Watermelon”转换为“Waterme”。
• str.endsWith('melon', 8)返回，false因为我们指定了最大长度为 8，这将转换要检查的字符串为“Watermel”，而不是以“melon”结尾。

String.protoype.slice()

String.protoype.slice()是一种有用的方法，可以将字符串的一部分提取到另一个字符串中，而不修改原始字符串。

此方法接受两个参数：起始索引和结束索引。第二个参数是可选的，如果未指定，则默认为字符串的末尾。

让我们看一个例子：

const str = "Watermelon";

const str2 = str.slice(1);
// atermelon
const str3 = str.slice(1,5);
// ater
const str4 = str.slice(5);
// melon
const str5 = str.slice(10);
// ''

让我们看看我们刚刚做了什么：

• str.slice(1)提取从索引 1 到字符串末尾的每个字符
• str.slice(1,5)提取索引 1 至索引 5 中的字符
• str.slice(5)提取从索引 5 到字符串末尾的字符
• str.slice(11)提取从索引 11 到字符串末尾的字符。由于字符串不包含 11 个字符，因此我们得到的结果为空字符串

String.prototype.substring()

String.prototype.substring()与前一种方法非常相似slice()，因为它用于提取字符串的一部分。

它需要两个参数，一个用于起始索引，一个用于结束索引。

让我们看一些例子：

const str = "Watermelon";

const str2 = str.substring(1);
// atermelon
const str3 = str.substring(1,5);
// ater
const str4 = str.substring(5);
// melon
const str5 = str.substring(10);
// ''

如果您查看上面的示例并将它们与slice()方法中的示例进行比较，您会想知道有什么区别，因为它们都返回了相同的子字符串。

虽然在大多数情况下，您可以互换使用它们，但两者之间存在差异。

看这个例子来了解第一个区别：

const str = "Watermelon";

const subStr = str.substring(10,0);
// Watermelon
const sliceStr = str.slice(10,0);
// ''

在这种情况下，起始索引高于我提供的结束索引，并且您可以看到两种方法的行为不同：

substring()如果开始高于结束，则会交换开始和结束索引，而另一方面，不会这样做，因此返回一个空字符串。slice()

我们可以观察到的另一个区别与负索引有关：

const str = "Watermelon";

const subStr = str.substring(-3);
// Watermelon
const sliceStr = str.slice(-3);
// lon

当我们将起点设置为负值时，substring()将简单地将其视为 0（这对于NaN值也有效），同时将从字符串末尾slice()开始计算索引。

这就是str.slice(-3)返回“lon”的原因，因为它从字符串末尾的 3 步开始计数，一直到末尾。

在大多数情况下，使用其中任意一个都可以，但了解两者之间的一些差异会slice很有substring()用。

继续阅读...

非常感谢你的阅读。欢迎在DevTo、我的博客inspiredwebdev或Twitter上关注我。访问Educative.io获取交互式编程课程。

免责声明：亚马逊和 Educative 的链接为联盟链接，您的购买将为我带来额外佣金。谢谢

在Amazon和Leanpub上获取我的电子书