ES6字符串和數(shù)值新增方法總結(jié)
更新時間：2022年09月08日 08:53:28 作者：亦世凡華、
ES6為js新增了很多方法,包括遍歷、查詢、替換等等,下面這篇文章主要給大家介紹了關(guān)于ES6字符串和數(shù)值新增方法的相關(guān)資料,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下
主要講解了ES6中字符串與數(shù)值新增的常見的主要方法， 對其做了如下總結(jié)：
字符串新增方法
ES6對字符串新增的方法做一簡單總結(jié)：
模板字符串
內(nèi)容中的空格和換行都是可以被保留的：
<script>
let str = `我也是一個字符串哦
你知道嗎
`
console.log(str);
let str1 = `<ul>
<li>張三</li>
<li>李四</li>
<li>王五</li>
<li>陳六</li>
</ul>`
console.log(str1);
//如果想刪掉字符串的頭尾空白符 可以使用 trim() 方法進行清除
let str2 = ` 前面的空白符被刪掉了`
console.log(str2.trim());
</script>
內(nèi)容中的變量(可以是數(shù)值、函數(shù)、字符串、對象等)可以寫在 ${} 之中：
<script>
//數(shù)值運算
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('-------------');
//對象使用
let obj = {
name:'張三'
}
console.log(`我的名字：${obj.name}`);
</script>
字符串對象新增方法
在字符串中查找指定元素：includes()、startWith()、endsWith()
<script>
//JS中只有 indexOf() 可以查找一個字符串中是否含特定元素，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()針對的是前n個字符，另外兩種針對的是后n個字符
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ù)就會取整，如果是0到-1之間的取整就是0
console.log(str.repeat(3.5));
console.log(str.repeat(-0.6)); //為 ""
//參數(shù)如果是NaN等同于0，如果是字符串先會轉(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>
在字符串中指定字符串補充內(nèi)容：padStart()、padEnd()
<script>
/* padStart()和padEnd()一共接受兩個參數(shù)，
* 第一個參數(shù)是：字符串補全生效的最大長度
* 第二個參數(shù)是：用來補全的字符串,如果不寫，默認(rèn)就是字符串
*/
let str = 'aaa'
console.log(str.padStart(5,'x'));
console.log(str.padEnd(5,'x'));
console.log(str.padStart(5));
//如果原字符串大于或等于設(shè)置的最大長度，補充失效，輸出原字符串
console.log(str.padStart(2,'x'));
//如果補全字符內(nèi)容超過規(guī)定最大長度，截去超出的長度
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>
//在字符串實例方法中，replace() 只能替換第一個字符,而ES引入的replaceAll()可以替換所有匹配
let str = 'aaabbedreaa'
console.log(str.replaceAll('a','_')); // ___bbedre__
//如果使用正則表達式，必須加上g修飾符
console.log(str.replaceAll(/a/g,'A')); // AAAbbedreAA
//replaceAll()的第二個參數(shù)是一個字符串，表示替換的文本，其中可以使用一些特殊字符串。
//$&：匹配的字符串。
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ù)。這個參數(shù)生效的前提是，第一個參數(shù)必須是正則表達式。
console.log('abbc'.replaceAll(/(ab)(bc)/g, '$2$1')); // 'bcab'
//$$：指代美元符號$。
console.log('abc'.replaceAll('b', '$$')); // 'a$c'
</script>數(shù)值新增方法
ES6對數(shù)值新增的方法做一簡單總結(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():用來檢查一個值是否為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()：用來判斷一個數(shù)值是否為整數(shù)。如果對數(shù)據(jù)精度的要求較高，不建議使用
console.log(Number.isInteger(12)); //true
console.log(Number.isInteger(3.1)); //false
console.log(Number.isInteger(12.0)); //true 整數(shù)和浮點數(shù)采用的是同樣的儲存方法，所以 25 和 25.0 被視為同一個值。
console.log(Number.isInteger('12')); //false
console.log(Number.isInteger(3.0000000000000001)); //true 小數(shù)的精度達到了小數(shù)點后16個十進制位，轉(zhuǎn)成二進制位超過了53個二進制位，導(dǎo)致最后的那個1被丟棄了。
console.log(Number.isInteger(5E-325)); //true 小于 JavaScript 能夠分辨的最小值，會被自動轉(zhuǎn)為 0
// Number.isSafeInteger()：則是用來判斷一個整數(shù)是否落安全整數(shù)范圍之內(nèi)。
// JavaScript 能夠準(zhǔn)確表示的整數(shù)范圍在-2^53到2^53之間（不含兩個端點），超過這個范圍，無法精確表示這個值。
// ES6 引入了Number.MAX_SAFE_INTEGER和Number.MIN_SAFE_INTEGER這兩個常量，用來表示這個范圍的上下限
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ù)與浮點數(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的實質(zhì)是：一個可以接受的最小誤差范圍。
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')); //對于空值和無法截取整數(shù)的值，返回NaN。
</script>在數(shù)值上判斷一個數(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ù)值上計算一個數(shù)的立方根：Math.cbrt()
<script>
// 對于非數(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方法會將其轉(zhuǎn)為數(shù)值。只要有一個參數(shù)無法轉(zhuǎn)為數(shù)值，就會返回 NaN。
console.log(Math.hypot(6,'8')); // 10
console.log(Math.hypot(3,4,'sum')); //NaN
</script>在數(shù)值上ES6新增四個對數(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的自然對數(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的對數(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的對數(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>總結(jié)
到此這篇關(guān)于ES6字符串和數(shù)值新增方法的文章就介紹到這了,更多相關(guān)ES6字符串和數(shù)值新增方法內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
關(guān)于meta viewport中target-densitydpi屬性詳解（推薦）
這篇文章主要介紹了關(guān)于meta viewport中target-densitydpi屬性詳解，通過不同的縮放比例實現(xiàn)了不同的預(yù)覽效果，具體操作步驟大家可查看下文的詳細(xì)講解，感興趣的小伙伴們可以參考一下。2017-08-08
JS?生態(tài)系統(tǒng)加速Polyfill函數(shù)使用實例探索
這篇文章主要介紹了JS?生態(tài)系統(tǒng)加速Polyfill函數(shù)使用實例探索,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2024-01-01
通常我們有一份webpack.dev.config.js使用webpack-dev-server的proxy，代理到開發(fā)服務(wù)器，來解決本地跨域問題。假如項目變大，可能需要proxy到不同環(huán)境，那么如何解決webpack-dev-server代理常切換問題，下面就一起來了解一下2019-01-01
JavaScript使用indexOf獲得子字符串在字符串中位置的方法
這篇文章主要介紹了JavaScript使用indexOf獲得子字符串在字符串中位置的方法,涉及javascript中indexOf方法操作字符串的技巧,需要的朋友可以參考下2015-04-04
這篇文章主要介紹了微信小程序3種位置API的使用方法詳解,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2019-08-08
js合并兩個數(shù)組生成合并后的key：value數(shù)組
這篇文章主要是介紹了js將兩個數(shù)組合并為類json方式,需要的朋友可以參考下2018-05-05
手機端圖片縮放旋轉(zhuǎn)全屏查看PhotoSwipe.js插件實現(xiàn)
這篇文章主要介紹了手機端圖片縮放旋轉(zhuǎn)全屏查看PhotoSwipe.js插件實現(xiàn)，感興趣的小伙伴們可以參考一下2016-08-08
javascript:FF/Chrome與IE動態(tài)加載元素的區(qū)別說明
今天在寫一段js時，發(fā)現(xiàn)IE與FF在動態(tài)加載Html元素時，有一些差別，一起過來看看下面的代碼吧2014-01-01
在JavaScript中雖沒有類似的方法，但我們可以利用字符串的replace方法自定義字符串的格式化方法。下面通過本文給大家分享使用JS在HTML中自定義字符串格式化的方法，需要的的朋友參考下吧2017-07-07
使用onkeypress字符按鍵兼容所有瀏覽器，感興趣的朋友可以參考下，希望對你學(xué)習(xí)js事件有所幫助2013-04-04