js字符串slice_JavaScript子字符串示例-JS中的Slice，Substr和Substring方法

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!

感謝您的閱讀！