ES6字符串的擴展

zqhxuyuan 發布于2019-08-23 11:50 / 1720人閱讀

摘要：注本文只是我在看了阮一峰老師的入門中的字符串的擴展后記錄下來的一些認為自己需要掌握的知識點。返回布爾值，表示參數字符串是否在原字符串的頭部。，引入了字符串補全長度的功能。

注：本文只是我在看了阮一峰老師的ECMAScript 6 入門中的字符串的擴展后記錄下來的一些認為自己需要掌握的知識點。對大家沒有什么參考價值。原文鏈接：ECMAScript 6 入門 —— 阮一峰

字符串的遍歷器接口

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

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

includes(), startsWith(), endsWith()

傳統上，JavaScript 只有indexOf方法，可以用來確定一個字符串是否包含在另一個字符串中。ES6 又提供了三種新方法。

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

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

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

let s = "Hello world!";

s.startsWith("Hello") // true
s.endsWith("!") // true
s.includes("o") // true

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

let s = "Hello world!";

s.startsWith("world", 6) // true
s.endsWith("Hello", 5) // true
s.includes("Hello", 6) // false

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

repeat()

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

"x".repeat(3) // "xxx"
"hello".repeat(2) // "hellohello"
"na".repeat(0) // ""

參數如果是小數，會被取整。

"na".repeat(2.9) // "nana"
如果repeat的參數是負數或者Infinity，會報錯。

"na".repeat(Infinity)
// RangeError
"na".repeat(-1)
// RangeError

但是，如果參數是 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()

ES2017 引入了字符串補全長度的功能。如果某個字符串不夠指定長度，會在頭部或尾部補全。padStart()用于頭部補全，padEnd()用于尾部補全。

"x".padStart(5, "ab") // "ababx"
"x".padStart(4, "ab") // "abax"

"x".padEnd(5, "ab") // "xabab"
"x".padEnd(4, "ab") // "xaba"

上面代碼中，padStart和padEnd一共接受兩個參數，第一個參數用來指定字符串的最小長度，第二個參數是用來補全的字符串。

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

"xxx".padStart(2, "ab") // "xxx"
"xxx".padEnd(2, "ab") // "xxx"

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

"abc".padStart(10, "0123456789")
// "0123456abc"

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

"x".padStart(4) // "   x"
"x".padEnd(4) // "x   "

padStart的常見用途是為數值補全指定位數。下面代碼生成 10 位的數值字符串。

"1".padStart(10, "0") // "0000000001"
"12".padStart(10, "0") // "0000000012"
"123456".padStart(10, "0") // "0000123456"

另一個用途是提示字符串格式。

"12".padStart(10, "YYYY-MM-DD") // "YYYY-MM-12"
"09-12".padStart(10, "YYYY-MM-DD") // "YYYY-09-12"

模板字符串

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

// 普通字符串
`In JavaScript "
" is a line-feed.`

// 多行字符串
`In JavaScript this is
 not legal.`

console.log(`string text line 1
string text line 2`);

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

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

let greeting = ``Yo` World!`;

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

$("#list").html(`

  first
  second

`);

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

$("#list").html(`

  first
  second

`.trim());

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

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

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/97540.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