js字符串slice

In daily programming, we often need to work with strings. Fortunately, there are many built-in methods in JavaScript that help us while working with arrays, strings and other data types. We can use these methods for various operations like searching, replacing, concatenating strings, and so on.

在日常编程中，我们经常需要使用字符串。 幸运的是，JavaScript中有许多内置方法可以在处理数组，字符串和其他数据类型时为我们提供帮助。 我们可以将这些方法用于各种操作，例如搜索，替换，串联字符串等。

Getting a substring from a string is one of the most common operations in JavaScript. In this article, you’re going to learn how to get a substring by using 3 different built-in methods. But first, let me explain briefly what a substring is.

从字符串中获取子字符串是JavaScript中最常见的操作之一。 在本文中，您将学习如何使用3种不同的内置方法来获取子字符串。 但首先，让我简要解释一下什么是子字符串。

什么是子串？ (What is a Substring?)

A substring is a subset of another string:

子字符串是另一个字符串的子集：

"I am learning JavaScript and it is cool!"  -->  Original String"I am learning JavaScript"  -->  Substring"JavaScript is cool!"  -->  Another Substring

Like in the example above, in some cases we need to get one or more substrings from a complete sentence or a paragraph. Now let’s see how to do that in JavaScript in 3 different ways.

像上面的示例一样，在某些情况下，我们需要从完整的句子或段落中获取一个或多个子字符串。 现在，让我们看看如何以3种不同的方式在JavaScript中进行操作。

You can also watch the video version of the example usages here:

您还可以在此处观看示例用法的视频版本：

1. substring()方法 (1. The substring( ) Method)

Let’s start with the substring( ) method. This method basically gets a part of the original string and returns it as a new string. The substring method expects two parameters:

让我们从substring()方法开始。 此方法基本上获取原始字符串的一部分，并将其作为新字符串返回。 substring方法需要两个参数：

string.substring(startIndex, endIndex);

• startIndex: represents the starting point of the substring

  startIndex ：代表子字符串的起点

• endIndex: represents the ending point of the substring (optional)

  endIndex ：代表子字符串的终点(可选)

Let’s see the usage in an example. Suppose that we have the example string below:

让我们在示例中查看用法。 假设下面有示例字符串：

const myString = "I am learning JavaScript and it is cool!";

Now if we set the startIndex as 0 and the endIndex as 10, then we will get the first 10 characters of the original string:

现在，如果将startIndex设置为0，将endIndex设置为10，则将获得原始字符串的前10个字符：

However, if we set only a starting index and no ending index for this example:

但是，如果在此示例中我们仅设置开始索引而没有设置结束索引：

Then we get a substring starting from the 6th character until the end of the original string.

然后我们得到一个从第6个字符开始直到原始字符串结尾的子字符串。

Some additional points:

其他一些要点：

• If startIndex = endIndex, the substring method returns an empty string如果startIndex = endIndex，则substring方法将返回一个空字符串
• If startIndex and endIndex are both greater than the length of the string, it returns an empty string如果startIndex和endIndex都大于字符串的长度，则返回一个空字符串
• If startIndex > endIndex, then the substring method swaps the arguments and returns a substring, assuming as the endIndex > startIndex如果startIndex> endIndex，则子字符串方法交换参数并返回一个子字符串，假定为endIndex> startIndex

2. slice()方法 (2. The slice( ) Method)

The slice( ) method is similar to the substring( ) method and it also returns a substring of the original string. The slice method also expects the same two parameters:

slice()方法类似于substring()方法，并且它还返回原始字符串的子字符串。 slice方法还需要相同的两个参数：

string.slice(startIndex, endIndex);

• startIndex: represents the starting point of the substring

  startIndex ：代表子字符串的起点

• endIndex: represents the ending point of the substring (optional)

  endIndex ：代表子字符串的终点(可选)

substring()和slice()方法的共同点： (The common points of substring( ) and slice( ) methods:)

• If we don’t set an ending index, then we get a substring starting from the given index number until the end of the original string:如果我们没有设置结束索引，那么我们将从给定的索引号开始直到原始字符串的末尾得到一个子字符串：

• If we set both the startIndex and the endIndex, then we will get the characters between the given index numbers of the original string:如果我们同时设置了startIndex和endIndex，则将获得原始字符串的给定索引号之间的字符：

• If startIndex and endIndex are greater than the length of the string, it returns an empty string如果startIndex和endIndex大于字符串的长度，则返回一个空字符串

slice()方法的区别： (Differences of the slice( ) method:)

• If startIndex > endIndex, the slice( ) method returns an empty string如果startIndex> endIndex，则slice()方法返回一个空字符串
• If startIndex is a negative number, then the first character begins from the end of the string (reverse):如果startIndex为负数，则第一个字符从字符串的末尾开始(反向)：

Note: We can use the slice( ) method also for JavaScript arrays. You can find here my other article about the slice method to see the usage for arrays.

注意：我们也可以将slice()方法用于JavaScript数组。 您可以在此处找到有关slice方法的其他文章 ，以了解数组的用法。

3. substr()方法 (3. The substr( ) Method)

According to the Mozilla documents, the substr( ) method is considered a legacy function and its use should be avoided. But I will still briefly explain what it does because you might see it in older projects.

根据Mozilla文档 ，substr()方法被视为旧版函数，应避免使用它。 但是我仍然会简要解释它的作用，因为您可能会在较早的项目中看到它。

The substr( ) method also returns a substring of the original string and expects two parameters as:

substr()方法还返回原始字符串的子字符串，并期望两个参数为：

string.substring(startIndex, length);

• startIndex: represents the starting point of the substring

  startIndex ：代表子字符串的起点

• length: number of characters to be included (optional)

  length ：要包含的字符数(可选)

You can see the difference here: the substr( ) method expects the second parameter as a length instead of an endIndex:

您可以在此处看到区别：substr()方法将第二个参数作为长度而不是endIndex：

In this example, it basically counts 5 characters starting with the given startIndex and returns them as a substring.

在此示例中，它基本上从给定的startIndex开始计数5个字符，并将它们作为子字符串返回。

However, if we don’t define the second parameter, it returns up to the end of the original string (like the previous two methods do):

但是，如果我们不定义第二个参数，它将返回到原始字符串的末尾(就像前两个方法一样)：

Note: All 3 methods return the substring as a new string and they don’t change the original string.

注意：所有3种方法都将子字符串作为新字符串返回，并且它们不会更改原始字符串。

结语 (Wrap up)

So these are the 3 different methods to get a substring in JavaScript. There are many other built-in methods in JS which really help us a lot when dealing with various things in programming. If you find this post helpful, please share it on social media.

因此，这是在JavaScript中获取子字符串的3种不同方法。 JS中还有许多其他内置方法，在处理编程中的各种问题时，它们确实对我们有很大帮助。 如果您发现此帖子有帮助，请在社交媒体上分享。

If you want to learn more about web development, feel free to follow me on Youtube!

如果您想了解有关Web开发的更多信息，请随时 在YouTube上关注我 ！

Thank you for reading!

感谢您的阅读！

翻译自: https://www.freecodecamp.org/news/javascript-substring-examples-slice-substr-and-substring-methods-in-js/

js字符串slice