ES6字符串和數(shù)值新增方法總結(jié)

更新時(shí)間：2022年09月08日 08:53:28 作者：亦世凡華、

ES6為js新增了很多方法,包括遍歷、查詢、替換等等,下面這篇文章主要給大家介紹了關(guān)于ES6字符串和數(shù)值新增方法的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下

字符串新增方法

ES6對(duì)字符串新增的方法做一簡(jiǎn)單總結(jié)：

模板字符串

內(nèi)容中的空格和換行都是可以被保留的：

<script>
    let str = `我也是一個(gè)字符串哦
                你知道嗎
            `
    console.log(str);
    let str1 = `<ul>
        <li>張三</li>
        <li>李四</li>
        <li>王五</li>
        <li>陳六</li>
</ul>`
    console.log(str1);
    //如果想刪掉字符串的頭尾空白符 可以使用 trim() 方法進(jìn)行清除
    let str2 = `    前面的空白符被刪掉了`
    console.log(str2.trim());
</script>

內(nèi)容中的變量(可以是數(shù)值、函數(shù)、字符串、對(duì)象等)可以寫在 ${} 之中：

<script>
    //數(shù)值運(yùn)算
    let a = 1
    let b = 2
    console.log(`${a+b}`);
    console.log('-------------');
    //字符串拼接
    let str = '張三'
    let name1 = `我的名字是：${str}`
    console.log(name1);
    console.log('-------------');
    //函數(shù)使用
    function fun(){
        return "hello world"
    }
    console.log(`${fun()}`);
    console.log('-------------');
    //對(duì)象使用
    let obj = {
        name:'張三'
    }
    console.log(`我的名字：${obj.name}`);
</script>

字符串對(duì)象新增方法

在字符串中查找指定元素：includes()、startWith()、endsWith()

<script>
    //JS中只有 indexOf() 可以查找一個(gè)字符串中是否含特定元素，ES6提供三種方法
    //includes()：返回布爾值，表示是否找到了參數(shù)字符串。
    let str = 'Hello World'
    console.log(str.includes('W'));//true
 
    //startsWith()：返回布爾值，表示參數(shù)字符串是否在原字符串的頭部。
    let str1 = 'Hello People'
    console.log(str1.startsWith('H'));//true
 
    //endsWith()：返回布爾值，表示參數(shù)字符串是否在原字符串的尾部。只有endsWith()針對(duì)的是前n個(gè)字符，另外兩種針對(duì)的是后n個(gè)字符
    let str2 = 'Hello Animal'
    console.log(str2.endsWith('l'));//true
</script>

在字符串中將指定字符串重復(fù)n次：repeat()

<script>
    let str = 'a'
    console.log(str.repeat(2));
    //參數(shù)如果是小數(shù)就會(huì)取整，如果是0到-1之間的取整就是0
    console.log(str.repeat(3.5));
    console.log(str.repeat(-0.6)); //為 ""
 
    //參數(shù)如果是NaN等同于0，如果是字符串先會(huì)轉(zhuǎn)換為數(shù)字
    console.log(str.repeat(NaN)); //為 ""
    console.log(str.repeat('2'));
 
    //參數(shù)如果是負(fù)數(shù)或者Infinity
    console.log(str.repeat(-5));
    console.log(str.repeat(Infinity));
</script>

在字符串中指定字符串補(bǔ)充內(nèi)容：padStart()、padEnd()

<script>
    /* padStart()和padEnd()一共接受兩個(gè)參數(shù)，
     * 第一個(gè)參數(shù)是：字符串補(bǔ)全生效的最大長(zhǎng)度
     * 第二個(gè)參數(shù)是：用來補(bǔ)全的字符串,如果不寫，默認(rèn)就是字符串
    */
    let str = 'aaa'
    console.log(str.padStart(5,'x'));
    console.log(str.padEnd(5,'x'));
    console.log(str.padStart(5));
 
    //如果原字符串大于或等于設(shè)置的最大長(zhǎng)度，補(bǔ)充失效，輸出原字符串
    console.log(str.padStart(2,'x'));
    
    //如果補(bǔ)全字符內(nèi)容超過規(guī)定最大長(zhǎng)度，截去超出的長(zhǎng)度
    console.log(str.padStart(5,'hello'));
</script>

在字符串中指定字符串消除空白：trimStart()、trimEnd()

<script>
    //trimStart()消除字符串頭部的空格，trimEnd()消除尾部的空格
    const str = '  hello   '
    console.log(str.trimStart());//'hello   '
    console.log(str.trimEnd());  //'   hello'
</script>

在字符串中返回參數(shù)指定位置的字符：at()

<script>
    //at()支持負(fù)索引，如果參數(shù)超出了字符串范圍則返回underfined
    const str = 'hello'
    console.log(str.at(2));  // l
    console.log(str.at(-1)); //o
    console.log(str.at(12)); //underfined
</script>

在字符串中替換指定內(nèi)容：replaceAll()

<script>
    //在字符串實(shí)例方法中，replace() 只能替換第一個(gè)字符,而ES引入的replaceAll()可以替換所有匹配
    let str = 'aaabbedreaa'
    console.log(str.replaceAll('a','_')); // ___bbedre__
 
    //如果使用正則表達(dá)式，必須加上g修飾符
    console.log(str.replaceAll(/a/g,'A')); // AAAbbedreAA
 
    //replaceAll()的第二個(gè)參數(shù)是一個(gè)字符串，表示替換的文本，其中可以使用一些特殊字符串。
    //$&：匹配的字符串。
    console.log('abbc'.replaceAll('b', '$&')); // 'abbc'
 
    //$` ：匹配結(jié)果前面的文本。
    console.log('abbc'.replaceAll('b', '$`')); // 'aaabc'
 
    //$'：匹配結(jié)果后面的文本。
    console.log('abbc'.replaceAll('b', `$'`)); // 'abccc'
 
    //$n：匹配成功的第n組內(nèi)容，n是從1開始的自然數(shù)。這個(gè)參數(shù)生效的前提是，第一個(gè)參數(shù)必須是正則表達(dá)式。
    console.log('abbc'.replaceAll(/(ab)(bc)/g, '$2$1')); // 'bcab'
    
    //$$：指代美元符號(hào)$。
    console.log('abc'.replaceAll('b', '$$')); // 'a$c'
</script>

數(shù)值新增方法

ES6對(duì)數(shù)值新增的方法做一簡(jiǎn)單總結(jié)：

在數(shù)值上提供判斷數(shù)值是否有限、檢查數(shù)值是否為NaN：Number.isFinite()、Number.isNaN()

<script>
    // Number.isFinite()：判斷數(shù)值是否有限，即不是Infinity；注意：參數(shù)類型不是數(shù)值，Number.isFinite一律返回false。
    console.log(Number.isFinite(15)); //true
    console.log(Number.isFinite(-5)); //true
    console.log(Number.isFinite('hello')); //false
    console.log(Number.isFinite(true)); //false
 
    // Number.isNaN():用來檢查一個(gè)值是否為NaN
    console.log(Number.isNaN(NaN)); //true
    console.log(Number.isNaN(9/NaN));//true
    console.log(Number.isNaN(true));//false
    console.log(Number.isNaN('hello'));//false
</script>

在數(shù)值上提供判斷數(shù)值是否為整數(shù)、整數(shù)是否落在安全整數(shù)范圍之中：Number.isInteger()、Number.isSafeInteger()

<script>
    // Number.isInteger()：用來判斷一個(gè)數(shù)值是否為整數(shù)。如果對(duì)數(shù)據(jù)精度的要求較高，不建議使用
    console.log(Number.isInteger(12)); //true
    console.log(Number.isInteger(3.1)); //false
    console.log(Number.isInteger(12.0)); //true  整數(shù)和浮點(diǎn)數(shù)采用的是同樣的儲(chǔ)存方法，所以 25 和 25.0 被視為同一個(gè)值。
    console.log(Number.isInteger('12')); //false
    console.log(Number.isInteger(3.0000000000000001)); //true 小數(shù)的精度達(dá)到了小數(shù)點(diǎn)后16個(gè)十進(jìn)制位，轉(zhuǎn)成二進(jìn)制位超過了53個(gè)二進(jìn)制位，導(dǎo)致最后的那個(gè)1被丟棄了。
    console.log(Number.isInteger(5E-325)); //true 小于 JavaScript 能夠分辨的最小值，會(huì)被自動(dòng)轉(zhuǎn)為 0
 
    // Number.isSafeInteger()：則是用來判斷一個(gè)整數(shù)是否落安全整數(shù)范圍之內(nèi)。
    // JavaScript 能夠準(zhǔn)確表示的整數(shù)范圍在-2^53到2^53之間（不含兩個(gè)端點(diǎn)），超過這個(gè)范圍，無法精確表示這個(gè)值。
    // ES6 引入了Number.MAX_SAFE_INTEGER和Number.MIN_SAFE_INTEGER這兩個(gè)常量，用來表示這個(gè)范圍的上下限
    Number.MAX_SAFE_INTEGER === Math.pow(2, 53)
    Number.MIN_SAFE_INTEGER === -Math.pow(2, 53)
    console.log(Number.isSafeInteger(3)); //true
    console.log(Number.isSafeInteger(3.1)); //false
    console.log(Number.isSafeInteger(Number.MAX_SAFE_INTEGER)); //true
</script>

在數(shù)值上取整數(shù)與浮點(diǎn)數(shù)：Number.parseInt()、Number.parseFloat()

<script>
    // Number.parseInt
    console.log(Number.parseInt('12.45')); // 12
    // Number.parseFloat
    console.log(Number.parseFloat('12.45'));// 12.45
</script>

在數(shù)值上新增極小常量設(shè)置誤差范圍：Number.EPSILON

<script>
    // Number.EPSILON的實(shí)質(zhì)是：一個(gè)可以接受的最小誤差范圍。
    function withinErrorMargin (left, right) {
        return Math.abs(left - right) < Number.EPSILON * Math.pow(2, 2);
    }
    console.log(0.1 + 0.2 === 0.3); // false
    console.log(withinErrorMargin(0.1 + 0.2, 0.3));// true
 
    console.log(1.1 + 1.3 === 2.4);// false
    console.log(withinErrorMargin(1.1 + 1.3, 2.4));// true
</script>

Math數(shù)值新增方法

在數(shù)值上去除小數(shù)部分返回整數(shù)部分：Math.trunc()

<script>
    // Math.trunc方法用于去小返整，非數(shù)值先轉(zhuǎn)數(shù)值，不能轉(zhuǎn)的返回NaN
    console.log(Math.trunc(12.36));//12
    console.log(Math.trunc(-0.12));//-0
    console.log(Math.trunc(true));//1
    console.log(Math.trunc(false));//0
    console.log(Math.trunc('123.36'));//123
    console.log(Math.trunc('fun')); //對(duì)于空值和無法截取整數(shù)的值，返回NaN。
</script>

在數(shù)值上判斷一個(gè)數(shù)是正數(shù)、負(fù)數(shù)、還是0：Math.sign()

<script>
    // 正數(shù)返回+1、負(fù)數(shù)返回-1、0或-0返回0或-1、負(fù)數(shù)返回-1、0或-0返回0或-0、其他值返回NaN
    console.log(Math.sign(12)); //1
    console.log(Math.sign(-12)); //-1
    console.log(Math.sign(0)); //0
    console.log(Math.sign(-0)); //-0
    console.log(Math.sign('sign')); //NaN
</script>

在數(shù)值上計(jì)算一個(gè)數(shù)的立方根：Math.cbrt()

<script>
    // 對(duì)于非數(shù)值先轉(zhuǎn)換為數(shù)值，轉(zhuǎn)換不了的返回NaN
    console.log(Math.cbrt(8)); //2
    console.log(Math.cbrt('8')); //2
    console.log(Math.cbrt('hello')); //NaN
</script>

在數(shù)值上返回所有參數(shù)平方和的平方根：Math.hypot()

<script>
    // 例如：3 的平方加上 4 的平方，等于 5 的平方。
    console.log(Math.hypot(3,4)); // 5
    // 如果參數(shù)不是數(shù)值，Math.hypot方法會(huì)將其轉(zhuǎn)為數(shù)值。只要有一個(gè)參數(shù)無法轉(zhuǎn)為數(shù)值，就會(huì)返回 NaN。
    console.log(Math.hypot(6,'8')); // 10
    console.log(Math.hypot(3,4,'sum')); //NaN
</script>

在數(shù)值上ES6新增四個(gè)對(duì)數(shù)方法：Math.expml()、Math.log1p()、Math.log10()、Math.log2()

<script>
    // Math.expm1(x)返回 e^x - 1
    console.log(Math.expm1(0));//0 e^0-1=0
    console.log(Math.expm1(1));//1.718281828459045
 
    // Math.log1p(x)方法返回1 + x的自然對(duì)數(shù)，即Math.log(1 + x)。如果x小于-1，返回NaN。
    console.log(Math.log1p(1));// 0.6931471805599453
    console.log(Math.log1p(0));// 0
    console.log(Math.log1p(-1));// -Infinity
    console.log(Math.log1p(-2));// NaN
 
    // Math.log10(x)返回以 10 為底的x的對(duì)數(shù)。如果x小于 0，則返回 NaN。
    console.log(Math.log10(2));// 0.3010299956639812
    console.log(Math.log10(1));// 0
    console.log(Math.log10(0));// -Infinity
    console.log(Math.log10(-2));// NaN
 
    // Math.log2(x)返回以 2 為底的x的對(duì)數(shù)。如果x小于 0，則返回 NaN。
    console.log(Math.log2(3));// 1.584962500721156
    console.log(Math.log2(2));// 1
    console.log(Math.log2(1));// 0
    console.log(Math.log2(-2));// NaN
</script>