為ecmascript做準備6：新的字符串方法 -​​ string.protype。

>在我的上一篇有關ES6數組方法的文章中，我介紹了與數組類型一起使用的Ecmascript 6中可用的新方法。在本教程中，您將了解與字符串一起使用的新ES6方法：String.Prototype。

>我們將開發幾個示例，並提及可用於它們的多填充。請記住，如果您想使用一個庫將它們全部填充，可以使用Paul Miller的ES6-Shim。

鑰匙要點

eS6引入了幾種用於字符串操作的新方法，包括string.prototype.startswith（），string.prototype.endswith（），string.prototype.includes（），strign.prototype.repeat（）， and.raw（ ）。這些方法提供了更輕鬆，更有效的方法來檢查字符串是否以給定的子字符串啟動或結束，如果字符串包含某個子字符串，重複一個指定數量的字符串，以及處理模板字符串。

string.prototype.startswith（）和string.prototype.endswith（）中ES6中的方法允許您驗證字符串是否以給定的子字符串啟動或結束。他們既接受substring和位置作為參數，並根據字符串開始或以所提供的子字符串結束而返回true或false。
• 。
> string.prototype.includes（）方法ES6中的方法如果在另一個字符串中包含一個字符串，則無論位置如何，都會返回true。它接受與startswith（）和endswith（）方法相同的參數。
• > ES6中的String.prototype.repeat（）方法
string.prototype.startswith（）
>每個現代編程語言中最常用的功能之一是驗證字符串是否以給定的子字符串開頭的一種。在ES6之前，JavaScript沒有這樣的功能，這意味著您必須自己寫。以下代碼顯示了開發人員通常如何填充它：

或，或者：

<span>if (typeof String.prototype.startsWith !== 'function') {
</span>  <span>String.prototype.startsWith = function (str){
</span>    <span>return this.indexOf(str) === 0;
</span>  <span>};
</span><span>}
</span>

這些片段仍然有效，但是它們並沒有準確地重現新的可用string.prototype.startswith（）方法。新方法具有以下語法：

<span>if (typeof String.prototype.startsWith !== 'function') {
</span>  <span>String.prototype.startsWith = function (str){
</span>    <span>return this.substring(0, str.length) === str;
</span>  <span>};
</span><span>}
</span>

>您還可以看到，除了一個子字符串外，它還接受了第二個參數。搜索串參數指定要驗證的子字符串是字符串的開始。位置表示啟動搜索的位置。位置的默認值為0。如果字符串從提供的子字符串開始，則方法返回true，否則為false。請記住，該方法對情況很敏感，所以“ Hello”與“ Hello”不同。

>

此方法的一個示例用途如下：

<span>String.prototype.startsWith(searchString[, position]);
</span>

<span>if (typeof String.prototype.startsWith !== 'function') {
</span>  <span>String.prototype.startsWith = function (str){
</span>    <span>return this.indexOf(str) === 0;
</span>  <span>};
</span><span>}
</span>

>以下代碼的實時演示如下所示，也可在JSBIN上找到。

> 除了Internet Explorer，該方法在節點和所有現代瀏覽器中都支持該方法。如果您需要支持較舊的瀏覽器，則可以在MDN的方法頁面上找到該方法的多填充。 Mathias Bynens也開發了另一個多填充。

string.prototype.endswith（）> ecmascript 6介紹string.prototype.endswith（）方法。它驗證字符串是否用給定的子字符串終止。如下所示，此方法的語法與string.prototype.startswith（）：

>非常相似。

如您所見，此方法接受與String.prototype.startswith（）相同的參數，並且還返回相同類型的值。

一個區別在於，位置參數使您可以在字符串中搜索，就好像字符串僅此字符串一樣長。換句話說，如果我們有字符串房屋，並且使用'house'.endswith（'us'，4）稱呼該方法，我們會獲得True，因為這就像我們實際上有字符串Hous（請注意缺少的“ E”） 。

<span>if (typeof String.prototype.startsWith !== 'function') {
</span>  <span>String.prototype.startsWith = function (str){
</span>    <span>return this.substring(0, str.length) === str;
</span>  <span>};
</span><span>}
</span>

此方法的一個示例用途如下：

>以下片段的實時演示如下所示，也可以在JSBIN上找到。

除了Internet Explorer，該方法在節點和所有現代瀏覽器中都支持該方法。如果您需要支持較舊的瀏覽器，則可以在MDN的方法頁面上找到該方法的多填充。 Mathias Bynens開發了另一個多填充。

string.prototype.includes（）

<span>String.prototype.startsWith(searchString[, position]);
</span>

>我們正在談論驗證另一個字符串是否包含在另一個字符中時，讓我向您介紹string.prototype.includes（）方法。如果在另一個何處，另一個字符串包含在另一個，則返回true。

其語法如下所示：

>

參數的含義與string.prototype.startswith（）相同，因此我不會重複它們。此方法的示例用途如下：

>

>您可以在下面找到一個現場演示，也可以在JSBIN上找到。

> 除了Internet Explorer，

string.prototype.includes（）在節點和所有現代瀏覽器中都支持。如果您需要支持較舊的瀏覽器，就像本教程中討論的其他方法一樣，您可以找到Mathias Bynens提供的多填充（這個人知道如何做他的工作！），而在Mozilla開發人員網絡上進行了另一種。

<span>const str = 'hello!';
</span><span>let result = str.startsWith('he');
</span>
<span>// prints "true"
</span><span>console.log(result);
</span>
<span>// verify starting from the third character
</span>result <span>= str.startsWith('ll', 2);
</span>
<span>// prints "true"
</span><span>console.log(result);
</span>

注意：在版本48之前，Firefox使用非標準名稱包含。

string.prototype.repeat（）

<span>String.prototype.endsWith(searchString[, position]);
</span>

>現在讓我們繼續使用另一種類型的方法。 String.Prototype.repeat（）是一種返回一個新字符串的方法，該新字符串包含被調用但重複指定次數的相同字符串。該方法的語法為以下：

>

<span>if (typeof String.prototype.startsWith !== 'function') {
</span>  <span>String.prototype.startsWith = function (str){
</span>    <span>return this.indexOf(str) === 0;
</span>  <span>};
</span><span>}
</span>

時間參數指示必須重複字符串的次數。如果通過零，您將獲得一個空字符串，而如果通過一個負數或無窮大，則會獲得Rangeerror。

此方法的一個示例用途如下：

<span>if (typeof String.prototype.startsWith !== 'function') {
</span>  <span>String.prototype.startsWith = function (str){
</span>    <span>return this.substring(0, str.length) === str;
</span>  <span>};
</span><span>}
</span>

>以下代碼的實時演示如下所示，也可以在JSBIN上找到。

> 除了Internet Explorer，該方法在節點和所有現代瀏覽器中都支持該方法。如果您需要支持較舊的瀏覽器，則可以為此方法提供兩個polyfills：Mathias Bynens開發的一種和Mozilla Developer Network上的另一個。

> string.raw（）

我想在本教程中介紹的最後一個方法是string.raw（）。它被定義為

模板字符串的標籤函數

。這很有趣，因為它是模板庫的替代品，儘管我不確定它可以擴展足夠的擴展以實際替換這些庫。但是，這個想法基本上是與我們不久之後所看到的。它的作用是編譯字符串並用提供的值替換每個佔位符。 >

它的語法為以下（請注意Backticks）：> TemplateString參數表示包含模板進行過程的字符串。

為了更好地理解這個概念，讓我們看看一個具體的示例：>

>以下代碼的實時演示如下所示，也可以在JSBIN上找到。

<span>String.prototype.startsWith(searchString[, position]);
</span>

>

除了Opera和Internet Explorer，該方法在節點和所有現代瀏覽器中都支持。如果您需要支持較舊的瀏覽器，則可以使用多填充，例如在NPM上可用的瀏覽器。

結論

在本教程中，您已經了解了與字符串一起使用的Ecmascript 6中引入的幾種新方法。我們尚未涵蓋的其他方法是string.fromcodepoint（），string.prototype.codepointat（）和string.prototype.normalize（）。希望您喜歡這篇文章，並且您將繼續遵循我們的頻道以了解有關Ecmascript6的更多信息。

<span>const str = 'hello!';
</span><span>let result = str.startsWith('he');
</span>
<span>// prints "true"
</span><span>console.log(result);
</span>
<span>// verify starting from the third character
</span>result <span>= str.startsWith('ll', 2);
</span>
<span>// prints "true"
</span><span>console.log(result);
</span>

經常詢問有關ES6字符串方法的問題

>

>在ES6？

ES6中引入了哪些新的字符串方法，也稱為Ecmascript 2015，引入了幾種新的字符串方法，以使字符串操作更加容易，更有效。其中包括諸如startswith（），endswith（），include（），repot（）和模板文字之類的方法。 startswith（）方法檢查字符串是否以指定的字符串開頭，而endSwith（）檢查字符串是否以指定的字符串結束。 Incluber（）方法檢查字符串是否包含指定的字符串。重複（）方法重複一個指定數量的字符串。模板文字允許您使用$ {}語法將表達式嵌入字符串文字中。

> startswith（）方法如何在ES6？

中起作用ES6中的startswith（）方法用於確定字符串是否從指定字符串的字符開始。如果字符串從指定的字符串開始，則返回true，否則為false。語法是str.startswith（搜索string [，position]）。搜索串是在Str開始時要搜索的字符。可選的位置是搜索啟動的字符串中的位置。如果省略，搜索將從字符串的開頭開始。

>

eS6？

中的endswith（）方法是什麼？帶有指定字符串的字符。如果字符串以指定的字符串結束，則返回true。語法是str.endswith（搜索string [，lenth]）。搜索串是在Str結束時要搜索的字符。可選的長度是要搜索的字符串的長度。如果省略，使用字符串的長度。在另一個字符串中找到。如果字符串包含指定的字符串，則返回true。語法為str.crudes（searchstring [，位置]）。搜索串是要搜索的字符串。可選的位置是在開始搜索的字符串中的位置。如果省略，則搜索從字符串的開頭開始。

>

eS6？

中的重複（）方法是什麼？指定數量的字符串副本被稱為串聯在一起。語法是str.repeat（count），其中計數是重複字符串的次數。計數必須在0到無窮大之間，而不是一個負數。

模板文字如何在es6？

eS6中的模板文字中起作用。您可以在其中使用多行字符串和字符串插值功能。它們是由Backtick（）字符而不是雙引號或單個引號所包圍的。模板文字可以包含佔位符，以美元標誌和捲曲括號表示（$ {expression}）。佔位符和它們之間的文字中的表達式傳遞給函數。

> ）方法用於檢查字符串是否包含指定的字符串。但是，它們之間有一個關鍵區別。 Incluber（）方法返回一個布爾值 - 如果字符串包含指定的字符串，則否則為false。另一方面，索引（）方法返回指定字符串的第一次出現的索引，如果找不到字符串，則返回-1。

>我可以在所有瀏覽器中使用ES6字符串方法嗎？但是，對於不支持ES6的較舊瀏覽器，您可能需要使用像Babel這樣的轉板器將ES6代碼轉換為ES5，該代碼得到了更廣泛的支持。

>我如何使用帶有數組的ES6字符串方法？

一些ES6字符串方法可以與數組一起使用。例如，Incluber（）方法可用於確定數組是否包含某個元素。但是，並非所有字符串方法都適用於數組。重要的是要了解每種方法的特定用途和局限性。

ES6？

>在ES6中標記為標記的模板文字是更高級的模板文字形式。使用標記模板，您可以用功能解析模板文字。標籤函數的第一個參數包含字符串值數組。其餘的論點與表達式有關。然後，標籤函數可以在這些參數上執行操作並返回操縱字符串。

>

以上是為ecmascript做準備6：新的字符串方法 -​​ string.protype。的詳細內容。更多資訊請關注PHP中文網其他相關文章！