ES6 --》字符串与数值新增方法

简介: ES6语法规范

字符串新增方法

ES6对字符串新增的方法做一简单总结:

模板字符串

内容中的空格和换行都是可以被保留的

<script>letstr=`我也是一个字符串哦你知道吗`console.log(str);
letstr1=`<ul><li>张三</li><li>李四</li><li>王五</li><li>陈六</li></ul>`console.log(str1);
//如果想删掉字符串的头尾空白符 可以使用 trim() 方法进行清除letstr2=`    前面的空白符被删掉了`console.log(str2.trim());
</script>

图片.png

内容中的变量(可以是数值、函数、字符串、对象等)可以写在 ${} 之中:

<script>//数值运算leta=1letb=2console.log(`${a+b}`);
console.log('-------------');
//字符串拼接letstr='张三'letname1=`我的名字是:${str}`console.log(name1);
console.log('-------------');
//函数使用functionfun(){
return"hello world"    }
console.log(`${fun()}`);
console.log('-------------');
//对象使用letobj= {
name:'张三'    }
console.log(`我的名字:${obj.name}`);
</script>

图片.png

字符串对象新增方法

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

<script>//JS中只有 indexOf() 可以查找一个字符串中是否含特定元素,ES6提供三种方法//includes():返回布尔值,表示是否找到了参数字符串。letstr='Hello World'console.log(str.includes('W'));//true//startsWith():返回布尔值,表示参数字符串是否在原字符串的头部。letstr1='Hello People'console.log(str1.startsWith('H'));//true//endsWith():返回布尔值,表示参数字符串是否在原字符串的尾部。只有endsWith()针对的是前n个字符,另外两种针对的是后n个字符letstr2='Hello Animal'console.log(str2.endsWith('l'));//true</script>

在字符串中将指定字符串重复n次:repeat()

<script>letstr='a'console.log(str.repeat(2));
//参数如果是小数就会取整,如果是0到-1之间的取整就是0console.log(str.repeat(3.5));
console.log(str.repeat(-0.6)); //为 ""//参数如果是NaN等同于0,如果是字符串先会转换为数字console.log(str.repeat(NaN)); //为 ""console.log(str.repeat('2'));
//参数如果是负数或者Infinityconsole.log(str.repeat(-5));
console.log(str.repeat(Infinity));
</script>

图片.png

在字符串中指定字符串补充内容:padStart()padEnd()

<script>/* padStart()和padEnd()一共接受两个参数,     * 第一个参数是:字符串补全生效的最大长度     * 第二个参数是:用来补全的字符串,如果不写,默认就是字符串    */letstr='aaa'console.log(str.padStart(5,'x'));
console.log(str.padEnd(5,'x'));
console.log(str.padStart(5));
//如果原字符串大于或等于设置的最大长度,补充失效,输出原字符串console.log(str.padStart(2,'x'));
//如果补全字符内容超过规定最大长度,截去超出的长度console.log(str.padStart(5,'hello'));
</script>

图片.png

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

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

在字符串中返回参数指定位置的字符:at()

<script>//at()支持负索引,如果参数超出了字符串范围则返回underfinedconststr='hello'console.log(str.at(2));  // lconsole.log(str.at(-1)); //oconsole.log(str.at(12)); //underfined</script>

在字符串中替换指定内容:replaceAll()

<script>//在字符串实例方法中,replace() 只能替换第一个字符,而ES引入的replaceAll()可以替换所有匹配letstr='aaabbedreaa'console.log(str.replaceAll('a','_')); // ___bbedre__//如果使用正则表达式,必须加上g修饰符console.log(str.replaceAll(/a/g,'A')); // AAAbbedreAA//replaceAll()的第二个参数是一个字符串,表示替换的文本,其中可以使用一些特殊字符串。//$&:匹配的字符串。console.log('abbc'.replaceAll('b', '$&')); // 'abbc'//$` :匹配结果前面的文本。console.log('abbc'.replaceAll('b', '$`')); // 'aaabc'//$':匹配结果后面的文本。console.log('abbc'.replaceAll('b', `$'`)); // 'abccc'//$n:匹配成功的第n组内容,n是从1开始的自然数。这个参数生效的前提是,第一个参数必须是正则表达式。console.log('abbc'.replaceAll(/(ab)(bc)/g, '$2$1')); // 'bcab'//$$:指代美元符号$。console.log('abc'.replaceAll('b', '$$')); // 'a$c'</script>

数值新增方法

ES6对数值新增的方法做一简单总结:

在数值上提供判断数值是否有限、检查数值是否为NaN:Number.isFinite()Number.isNaN()

<script>// Number.isFinite():判断数值是否有限,即不是Infinity;注意:参数类型不是数值,Number.isFinite一律返回false。console.log(Number.isFinite(15)); //trueconsole.log(Number.isFinite(-5)); //trueconsole.log(Number.isFinite('hello')); //falseconsole.log(Number.isFinite(true)); //false// Number.isNaN():用来检查一个值是否为NaNconsole.log(Number.isNaN(NaN)); //trueconsole.log(Number.isNaN(9/NaN));//trueconsole.log(Number.isNaN(true));//falseconsole.log(Number.isNaN('hello'));//false</script>

在数值上提供判断数值是否为整数、整数是否落在安全整数范围之中:Number.isInteger()Number.isSafeInteger()

<script>// Number.isInteger():用来判断一个数值是否为整数。如果对数据精度的要求较高,不建议使用console.log(Number.isInteger(12)); //trueconsole.log(Number.isInteger(3.1)); //falseconsole.log(Number.isInteger(12.0)); //true  整数和浮点数采用的是同样的储存方法,所以 25 和 25.0 被视为同一个值。console.log(Number.isInteger('12')); //falseconsole.log(Number.isInteger(3.0000000000000001)); //true 小数的精度达到了小数点后16个十进制位,转成二进制位超过了53个二进制位,导致最后的那个1被丢弃了。console.log(Number.isInteger(5E-325)); //true 小于 JavaScript 能够分辨的最小值,会被自动转为 0// Number.isSafeInteger():则是用来判断一个整数是否落安全整数范围之内。// JavaScript 能够准确表示的整数范围在-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)); //trueconsole.log(Number.isSafeInteger(3.1)); //falseconsole.log(Number.isSafeInteger(Number.MAX_SAFE_INTEGER)); //true</script>

在数值上取整数与浮点数:Number.parseInt()Number.parseFloat()

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

在数值上新增极小常量设置误差范围:Number.EPSILON

<script>// Number.EPSILON的实质是:一个可以接受的最小误差范围。functionwithinErrorMargin (left, right) {
returnMath.abs(left-right) <Number.EPSILON*Math.pow(2, 2);
    }
console.log(0.1+0.2===0.3); // falseconsole.log(withinErrorMargin(0.1+0.2, 0.3));// trueconsole.log(1.1+1.3===2.4);// falseconsole.log(withinErrorMargin(1.1+1.3, 2.4));// true</script>

Math数值新增方法

在数值上去除小数部分返回整数部分:Math.trunc()

<script>// Math.trunc方法用于去小返整,非数值先转数值,不能转的返回NaNconsole.log(Math.trunc(12.36));//12console.log(Math.trunc(-0.12));//-0console.log(Math.trunc(true));//1console.log(Math.trunc(false));//0console.log(Math.trunc('123.36'));//123console.log(Math.trunc('fun')); //对于空值和无法截取整数的值,返回NaN。</script>

在数值上判断一个数是正数、负数、还是0:Math.sign()

<script>// 正数返回+1、负数返回-1、0或-0返回0或-1、负数返回-1、0或-0返回0或-0、其他值返回NaNconsole.log(Math.sign(12)); //1console.log(Math.sign(-12)); //-1console.log(Math.sign(0)); //0console.log(Math.sign(-0)); //-0console.log(Math.sign('sign')); //NaN</script>

在数值上计算一个数的立方根:Math.cbrt()

<script>// 对于非数值先转换为数值,转换不了的返回NaNconsole.log(Math.cbrt(8)); //2console.log(Math.cbrt('8')); //2console.log(Math.cbrt('hello')); //NaN</script>

在数值上返回所有参数平方和的平方根:Math.hypot()

<script>// 例如:3 的平方加上 4 的平方,等于 5 的平方。console.log(Math.hypot(3,4)); // 5// 如果参数不是数值,Math.hypot方法会将其转为数值。只要有一个参数无法转为数值,就会返回 NaN。console.log(Math.hypot(6,'8')); // 10console.log(Math.hypot(3,4,'sum')); //NaN</script>

在数值上ES6新增四个对数方法:Math.expml()Math.log1p()Math.log10()Math.log2()

<script>// Math.expm1(x)返回 e^x - 1console.log(Math.expm1(0));//0 e^0-1=0console.log(Math.expm1(1));//1.718281828459045// Math.log1p(x)方法返回1 + x的自然对数,即Math.log(1 + x)。如果x小于-1,返回NaN。console.log(Math.log1p(1));// 0.6931471805599453console.log(Math.log1p(0));// 0console.log(Math.log1p(-1));// -Infinityconsole.log(Math.log1p(-2));// NaN// Math.log10(x)返回以 10 为底的x的对数。如果x小于 0,则返回 NaN。console.log(Math.log10(2));// 0.3010299956639812console.log(Math.log10(1));// 0console.log(Math.log10(0));// -Infinityconsole.log(Math.log10(-2));// NaN// Math.log2(x)返回以 2 为底的x的对数。如果x小于 0,则返回 NaN。console.log(Math.log2(3));// 1.584962500721156console.log(Math.log2(2));// 1console.log(Math.log2(1));// 0console.log(Math.log2(-2));// NaN</script>


相关文章
|
6月前
|
JavaScript 前端开发
ES6之模板字符串及字符串新增方法
ES6之模板字符串及字符串新增方法
|
6月前
|
编解码 JavaScript 前端开发
ES6 字符串的新增方法
ES6 字符串的新增方法
|
3月前
|
JavaScript 前端开发
ES6 中新增的两种数据类型及类型判断 ( 二 )
ES6 中新增的两种数据类型及类型判断 ( 二 )
|
3月前
|
存储 JavaScript 前端开发
ES6 中新增的两种数据类型及类型判断 ( 一 )
ES6 中新增的两种数据类型及类型判断 ( 一 )
|
6月前
|
JavaScript 前端开发 API
ES6学习笔记--字符串与数值的拓展
ES6学习笔记--字符串与数值的拓展
|
6月前
|
JavaScript 前端开发
js数据类型有几类?一共有几种?判断数据类型的方法是什么?
js数据类型有几类?一共有几种?判断数据类型的方法是什么?
|
JavaScript 前端开发 安全
ES6(数值的扩展)
ES6(数值的扩展)
66 0
ES6新增操作字符串的七种方法
ES6新增操作字符串的七种方法
|
6月前
|
前端开发 JavaScript Java
ES6中将非数组转换为数组的三种方法
ES6中将非数组转换为数组的三种方法
|
11月前
|
JavaScript 前端开发
ES6学习(四)—字符串的新增方法
ES6学习(四)—字符串的新增方法
下一篇
无影云桌面