深切明白ES6（三）（字符串的擴大）

2023年6月20日 125次阅读 来源: keywords

字符串的擴大

一、 字符串的遍歷器接口

  • ES6 為字符串增加了遍歷器接口，使得字符串能夠被for…of輪迴遍歷。
for (let codePoint of 'foo') {
console.log(codePoint)
}
// "f"
// "o"

二、includes(), startsWith(), endsWith()

  • 傳統上， JavaScript 只要indexOf要領，能夠用來肯定一個字符串是不是包含在另一個字符串中。 ES6 又供應了三種新要領。

    1. includes() ：返回布爾值，示意是不是找到了參数字符串。
    2. startsWith() ：返回布爾值，示意參数字符串是不是在源字符串的頭部。
    3. endsWith() ：返回布爾值，示意參数字符串是不是在源字符串的尾部。
var s = 'Hello world!';
s.startsWith('Hello') // true
s.endsWith('!') // true
s.includes('o') // true
  • 這三個要領都支撐第二個參數，示意最先搜刮的位置。
var 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) // ""
  • 假如repeat的參數是字符串，則會先轉換成数字。
'na'.repeat('na') // ""
'na'.repeat('3') // "nanana"

四、模板字符串

  • 模板字符串（ template string ）是增強版的字符串，用反引號（ `）標識。它能夠看成平常字符串運用，也能夠用來定義多行字符串，或許在字符串中 嵌入變量。
//  平常字符串
`In JavaScript '\n' is a line-feed.`
//  多行字符串
`In JavaScript this is
not legal.`
console.log(`string text line 1
string text line 2`);
//  字符串中嵌入變量
var name = "Bob", time = "today";
`Hello ${name}, how are you ${time}?`
  • 模板字符串中嵌入變量，須要將變量名寫在${}當中。
  • 大括號內部能夠放入恣意的 JavaScript 表達式，能夠舉行運算，以及援用對象屬性
  • 模板字符串當中還能挪用函數。
  • 假如大括號中的值不是字符串，將根據平常的劃定規矩轉為字符串。比方，大括號中是一個對象，將默許挪用對象的toString要領。
  • 假如模板字符串中的變量沒有聲明，將報錯。

正則的擴大

  • 在 ES5 中， RegExp 組織函數的參數有兩種狀況

    1. 參數是字符串，這時候第二個參數示意正則表達式的修飾符（ flag ）

      var regex = new RegExp('xyz', 'i');
//  等價於
var regex = /xyz/i;

    2. 參數是一個正則示意式，這時候會返回一個原有正則表達式的拷貝

      var regex = new RegExp(/xyz/i);
//  等價於
var regex = /xyz/i;
  • 然則， ES5 不許可此時運用第二個參數，增加修飾符，不然會報錯
var regex = new RegExp(/xyz/, 'i');
// Uncaught TypeError: Cannot supply flags when constructing one RegExp from another
  • ES6 改變了這類行動。假如 RegExp 組織函數第一個參數是一個正則對象，那末能夠運用第二個參數指定修飾符。而且，返回的正則表達式會疏忽原有的正則表達式的修飾符，只運用新指定的修飾符
new RegExp(/abc/ig, 'i').flags
// "i"

  • flags 屬性

    • ES6 為正則表達式新增了flags屬性，會返回正則表達式的修飾符。

      // ES5 的 source 屬性
//  返回正則表達式的正文
/abc/ig.source
// "abc"
// ES6 的 flags 屬性
//  返回正則表達式的修飾符
/abc/ig.flags
// 'gi'

數值的擴大

（一）、 二進制和八進制示意法

  • ES6 供應了二進制和八進制數值的新的寫法，分別用前綴0b（或0B）和0o（或0O）示意。
0b111110111 === 503 // true
0o767 === 503 // true
  • 從 ES5 最先，在嚴厲形式當中，八進制就不再許可運用前綴0示意， ES6 進一步明白，要運用前綴0o示意。
//  非嚴厲形式
(function(){
console.log(0o11 === 011);
})() // true
//  嚴厲形式
(function(){
'use strict';
console.log(0o11 === 011);
})() // Uncaught SyntaxError: Octal literals are not allowed in strict mode.
  • 假如要將0b和0o前綴的字符串數值轉為十進制，要運用Number要領。
Number('0b111') // 7
Number('0o10') // 8

（二）、Number.isFinite(), Number.isNaN()

  • ES6 在 Number 對象上，新供應了Number.isFinite()和Number.isNaN()兩個要領。

    1. Number.isFinite()用來搜檢一個數值是不是為有限的（ finite ）。
Number.isFinite(15); // true
Number.isFinite(0.8); // true
Number.isFinite(NaN); // false
Number.isFinite(Infinity); // false
Number.isFinite(-Infinity); // false
Number.isFinite('foo'); // false
Number.isFinite('15'); // false
Number.isFinite(true); // false
  1. Number.isNaN()用來搜檢一個值是不是為NaN。
Number.isNaN(NaN) // true
Number.isNaN(15) // false
Number.isNaN('15') // false
Number.isNaN(true) // false
Number.isNaN(9/NaN) // true
Number.isNaN('true'/0) // true
Number.isNaN('true'/'true') // true
  • 它們與傳統的全局要領isFinite()和isNaN()的區分在於，傳統要領先挪用Number()將非數值的值轉為數值，再舉行推斷，而這兩個新要領只對數值有用，非數值一概返回false
isFinite(25) // true
isFinite("25") // true
Number.isFinite(25) // true
Number.isFinite("25") // false
isNaN(NaN) // true
isNaN("NaN") // true
Number.isNaN(NaN) // true
Number.isNaN("NaN") // false

（三）、 Number.parseInt(), Number.parseFloat()

  • ES6 將全局要領parseInt()和parseFloat()，移植到 Number 對象上面，行動完整堅持穩定。
// ES5 的寫法
parseInt('12.34') // 12
parseFloat('123.45#') // 123.45
// ES6 的寫法
Number.parseInt('12.34') // 12
Number.parseFloat('123.45#') // 123.45
  • 如許做的目標，是逐漸削減全局性要領，使得言語逐漸模塊化。
Number.parseInt === parseInt // true
Number.parseFloat === parseFloat // true

（四）、 Number.isInteger()

  • Number.isInteger()用來推斷一個值是不是為整數。須要注重的是，在 JavaScript 內部，整數和浮點數是一樣的貯存要領，所以 3 和 3.0 被視為同一個值。
Number.isInteger(25) // true
Number.isInteger(25.0) // true
Number.isInteger(25.1) // false
Number.isInteger("15") // false
Number.isInteger(true) // false
  • ES6 在 Number 對象上面，新增一個極小的常量Number.EPSILON。
Number.EPSILON
// 2.220446049250313e-16
Number.EPSILON.toFixed(20)
// '0.00000000000000022204'

    • 延續更新中~喜好請留下個喜好哦！

        原文作者：keywords
        原文地址: https://segmentfault.com/a/1190000015232480
        本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
    点赞