ES6--字符串的擴展

Gu_Yan 發布于2019-08-21 16:25 / 1041人閱讀

摘要：現在整理下中字符串類型的一些實用擴展，供大家參考。返回布爾值，表示參數字符串是否在原字符串的頭部。如果原字符串的長度，等于或者大于制定最小長度，則返回原字符串。方法，當作模板字符串的處理函數，返回已替換變量或執行函數后的字符串。

最近開發小程序，對應ES6是一個很好的應用機會?，F在整理下ES6中字符串類型的一些實用擴展，供大家參考。目前主要是參考阮一峰老師的ECMAScript 6 入門

字符串的遍歷接口

ES6為字符串添加了遍歷接口，使得字符串可以被for..of遍歷。

for(let st of "foo") {
  console.log(st)
}
// "f"
// "o"
// "o"

includes()、startsWith()、endsWith()

ES5中，indexOf()可以一個字符串是否存在另一個字符串中。ES6中又提供了三個方法：

includes(): 返回布爾值，表示是否找個參數字符串。

startsWith(): 返回布爾值，表示參數字符串是否在原字符串的頭部。

endsWith(): 返回布爾值，表示參數字符串是否在原字符串的尾部。

let string = "Hello Clearlove"

string.includes("Clearlove"); // true
string.stattsWith("Hello"); // true
string.endsWith("Clearlove"); // true

這三個方法都支持第二個參數，表示開始搜索的位置：

let string = "Hello Clearlove"

string.includes("Clearlove", 6); //true
string.starstWith("Hello", 6); false
string.endsWith("Hello", 5); // true

使用第二個參數n時，endsWith()的行為與其他兩個方法有所不同。它是針對前n個字符，而其他兩個方法針對從第n個位置直到字符串結束。

repeat

repeat方法返回一個新字符串，表示將原字符串重復n遍。

"x".repeat(2); // "xx"
"Hello".repeat(2); "HelloHello"
"na".repeat(0); ""

如果是小數則會向下取整：

"na".repeat(2.9); // "nana"

如果repeat的參數是負數或者Infinity,則會報錯：

"na".repeat(-1); // RangError
"na".repeat(Infinity); // RangError

但是，如果參數是0到-1之間的小數，則等同于0，這是因為會先進行取整運算。0到-1之間的小數，取整以后等于-0，repeat視同為0

"na".repeat(-0.9); // ""

參數NaN等同于0

"na".repeat(NaN); // ""

如果repeat的參數是字符串，則會先轉換成數字。

"na".repeat("na") // ""
"na".repeat("3") // "nanana"

padStart()、padEnd()

字符串自動補充，如果字符串長度不夠指定長度，會在頭部或者尾部補全。padStart()用于在頭部補全，padEnd()用于在尾部補全。

`love`.padStart(9, "Clear"); // "Clearlove"
"Clear".padEnd(9, "love"); // "Clearlove"

如果原字符串的長度，等于或者大于制定最小長度，則返回原字符串。

"Clearlove".padStart(5, "12"); // "Clearlove"

如果用來補全的字符串與原字符串，兩者的長度之和超過了指定的最小長度，則會截去超出位數的補全字符串。

"Clearlove".padEnd(12, "123456"); // "Clearlove123"

如果省略第二個參數，默認使用空格補全長度。

"Clearlove".padEnd(10); // "Clearlvoe "

模板字符串

模板字符串（template string）是增強版的字符串，用反引號`標識。它可以當作普通字符串使用，也可以用來定義多行字符串，或者在字符串中嵌入變量。

// 普通字符串
`Clearlove is a boy`

// 多行字符串
`Clearlove is
a boy`

// 字符串嵌入變量
let name = "Clearlove", time = "today"
`Hello ${name}, how are you ${time}?` // Hello Clearlove, how are you today?

上面代碼中的模板字符串，都是用反引號表示。如果在模板字符串中需要使用反引號，則前面要用反斜杠轉義。

``Hello` Clearlove!` // `Hello` Clearlove

如果使用模板字符串表示多行字符串，所有的空格和縮進都會被保留在輸出之中。

$("#list").html(`

  first
  second

`);

上面代碼中，所有模板字符串的空格和換行，都是被保留的，比如

trim

$("#list").html(`

  first
  second

`.trim());

模板字符串中嵌入變量，需要將變量名寫在${}之中。大括號內部可以放入任意的JavaScript表達式，可以進行運算，以及引用對象屬性，還能調用函數。

String.raw()

String.raw()方法，當作模板字符串的處理函數，返回已替換變量或執行函數后的字符串。若模板字符串中存在一個斜杠，則會被轉義成兩個斜杠。若本身為兩個斜杠，則不做處理。

let s1 = "Clear", s2 = "love"
String.raw`${ s1 + s2 }` // "Clearlove"

作為函數調用較少出現，就不多做介紹。

GPU云服務器云服務器 es6字符串擴展對象的擴展云計算的擴展服務器的擴展

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/88526.html

es6學習筆記--字符串的擴展、數組的擴展、對象的擴展

摘要：字符串的擴展字符串的遍歷器接口字符串可以被循環遍歷。即能識別編號大于查詢字符串是否包含某個字符返回布爾值，表示是否找到了參數字符串。返回布爾值，表示參數字符串是否在原字符串的頭部。字符串的擴展 1.字符串的遍歷器接口字符串可以被for...of循環遍歷。與es5的比較for循環雖可以遍歷字符串，但不能識別大于oxFFFF的編碼； 2.位置 --> 字符/碼點根據指定位置返回對應...

不知名網友 2019-08-22 16:02 評論0 收藏0
ES6入門之對象的擴展

摘要：循環遍歷對象自身的和繼承的可枚舉屬性不含屬性。返回一個數組，包含對象自身的所有屬性的鍵名。目前，只有對象方法的簡寫法可以讓引擎確認，定義的是對象的方法。showImg(https://user-gold-cdn.xitu.io/2019/5/21/16ada8456223b0e1); 1. 屬性的簡潔表示法在ES6中允許直接寫入變量和函數，作為對象的屬性和方法，使得代碼的書寫更為簡潔。...

RiverLi 2019-05-23 11:58 評論0 收藏0
《ES6標準入門》讀書筆記

摘要：標準入門讀書筆記和命令新增命令，用于聲明變量，是塊級作用域。用于頭部補全，用于尾部補全。函數調用的時候會在內存形成一個調用記錄，又稱為調用幀，保存調用位置和內部變量等信息。等到執行結束再返回給，的調用幀才消失。《ES6標準入門》讀書筆記 @(StuRep) showImg(https://segmentfault.com/img/remote/1460000006766369?w=3...

HollisChuang 2019-08-19 18:41 評論0 收藏0
ES6入門之對象的擴展

摘要：屬性的簡潔表示法在中允許直接寫入變量和函數，作為對象的屬性和方法，使得代碼的書寫更為簡潔。循環遍歷對象自身的和繼承的可枚舉屬性不含屬性。返回一個數組，包含對象自身的所有屬性的鍵名。 showImg(https://segmentfault.com/img/remote/1460000019259004?w=1282&h=1920); 1. 屬性的簡潔表示法在ES6中允許直接寫入變量...

AWang 2019-08-26 13:53 評論0 收藏0
ES6入門之正則的擴展

摘要：正則的擴展參數為字符串，那么第二個參數表示正則表達式的修飾符，如下等價于參數為一個正則表達式，這時返回一個原有正則表達式的拷貝。如下調用調用調用調用修飾符對正則表達式添加了修飾符，用來正確處理大于的字符。 showImg(https://segmentfault.com/img/bVbrJqm?w=800&h=1200); 1. 正則的擴展參數為字符串，那么第二個參數表示正則表達式...

jifei 2019-08-23 17:05 評論0 收藏0