登录  /  注册
首页 > web前端 > js教程 > 正文

ES6中值得了解的新增字符串方法

青灯夜游
发布: 2021-07-22 18:36:56
转载
2074人浏览过

本篇文章给大家介绍一下es6字符串中的新增方法,了解这些方法对大家有所帮助。

ES6中值得了解的新增字符串方法

1. String.fromCodePoint()

首先要提一下 String.fromCharCode() ,两个方法用途都是将unicode码转为对应的文字。但是String.fromCodePoint()是对String.fromCharCode()的改进。

方法名 js版本 区别
formCharCode es5 不能识别大于0xFFFF的码点,会发生溢出。fromCodePoint与之相反
formCodePoint es6 当传入多个参数时,他们会被合成一个字符串返回,fromCharCode则不会

6.png

2. String.raw()

两种用法:

  • 一种是用于模板字符串,这种用法不应该使用()
  • 另一种是使用(callSite, ...substitutions),两个参数:callSite是模板字符串的调用对象,应该是具有raw属性的对象 { raw: ['foo', 'bar', 'baz'] }

2.1 String.raw ``

将转义字符前加一个斜杠

String.raw`Hi\n${2+3}`     \\  "Hi\\5"
String.raw`Hi\u000A!`      \\  "Hi\\u000A!"
登录后复制

如果原字符串的斜杠已经被转义 即( \n )

String.raw`Hi\\n`;      \\ "Hi\\\\n"
String.raw`Hi\\n` == "Hi\\\\n";           \\ true
登录后复制

2.2 String.raw(callSite, ...substitutions)

正常来说,这种方法很少使用,但是为了模拟 t${0}e${1}s${2}t

String.raw({raw:'test'},3,4,5)   // "t3e4s5t"

String.raw({raw:['aa','bb','cc'],1+2,3})    // "aa3bb3cc"

// 下面这个函数和 `aa${2 + 3}bb${'Java' + 'Script'}cc` 是相等的.
String.raw({raw:['aa','bb','cc']},2+3,'java'+'Script')  // aa5bbjavaScriptcc
登录后复制

2.3 String.raw()的代码实现

String.raw = function (strings, ...values) {
  let output = '';
  let index;
  for (index = 0; index < values.length; index++) {
    output += strings.raw[index] + values[index];
  }

  output += strings.raw[index]
  return output;
}
登录后复制

3. 实例方法:codePointAt()

3.1 实例方法、静态方法、原型方法

首先要说一下什么是实例方法,有可能是我还是个菜鸡,所以刚一听到实例方法不知道它是什么。 js的方法类型有:实例方法、静态方法、原型方法三种。

  • 实例方法

实例方法要用到function这个对象中的prototype属性来定义。实例化对象后才可以使用

function A (){}
A.prototype.sayHello = function(){
	console.log("Hello")
}
var a = new A();
a.sayHello();     //  Hello
登录后复制
  • 静态方法

只通过A.方法 就能调用

function A(){}
A.sayHello = function(){
	console.log("Hello")
}
A.sayHello();     //Hello
登录后复制
  • 原型方法

原型中的方法实例和构造函数都可以访问到

function A(){}
A.prototype.sayHello = function(){
	console.log("原型方法")
}
A.sayHello = function(){
	console.log("静态方法")
}
A.sayHello()     // "静态方法"
A.prototype.sayHello()     //  "原型方法"
let a = new A();
a.sayHello();       // "原型方法"
登录后复制

函数是一个对象,函数对象中的属性 prototype可以想成一个指针,指向一个方法(这样不用每一次用构造函数创造一个新实例后都要将方法重新创建一遍)。这样就好理解了,var a是A的一个引用,也就是指针,a就可以指向sayHello这个方法,如果直接A.sayHello()是会报错的,因为A不是一个指针,a.sayHello()也会报错,因为a不是一个方法对象。

言归正传 codePointAt()的出现是为了解决Unicode码点大于0xFFFF的字符无法读取整个字符的问题

3.2 JavaScript字符存储格式

4.png

5.png

将十进制码点转为十六进制

s.codePointAt(0).toString(16)      // "20bb7"
登录后复制

3.3 用途

codePointAt()方法是测试一个字符由两个字节还是由四个字节组成的最简单方法

7.png

4. 实例方法:normalize()

许多欧洲语言有语调符号和重音符号 Unicode提供了两种方法:

8.png

&#39;\u01D1&#39;===&#39;\u004F\u030C&#39; //false
&#39;\u01D1&#39;.length // 1
&#39;\u004F\u030C&#39;.length // 2
登录后复制

上面代码 javaScript不能识别他们是一样的

4.1 不接收参数

但是 normalize()方法会将Unicode正视化

&#39;\u01D1&#39;.normalize() === &#39;\u004F\u030C&#39;.normalize()     // true
登录后复制

4.2 接收参数

&#39;\u004F\u030C&#39;.normalize(&#39;NFC&#39;).length // 1
&#39;\u004F\u030C&#39;.normalize(&#39;NFD&#39;).length // 2
登录后复制

上面代码表示,NFC参数返回字符的合成形式,NFD参数返回字符的分解形式。

不过,normalize方法目前不能识别三个或三个以上字符的合成。这种情况下,还是只能使用正则表达式,通过 Unicode 编号区间判断。

5. 实例方法:includes(), startsWith(), endsWith()

作用:用来确定一个字符串是否包含在另一个字符串中

  • JavaScript有indexOf方法
let a ="abcd";
a.indexOf("b");  // 1
a.indexOf("e");  // -1
登录后复制
  • includes() 返回布尔值 是否包含某字符
a.includes("b");    // true
a.includes("f");    // false
登录后复制
  • startsWith(). 返回布尔值,表示参数字符串是否在原字符串的头部
let a = "abc";
a.startsWith("a");  // true
a.startsWith("b");	// false
登录后复制
  • endsWith():返回布尔值,表示参数字符串是否在原字符串的尾部
a.endsWith("c");    // true
a.endsWith("a");    // false
登录后复制

startsWith()、endsWith()、includes() 都有第二个参数,表示搜索的起始位置。

let s = &#39;Hello world!&#39;;
s.startsWith(&#39;world&#39;, 6) // true
s.endsWith(&#39;Hello&#39;, 5) // true
s.includes(&#39;Hello&#39;, 6) // false
登录后复制

6. 实例方法:repeat()

作用:返回一个新字符串,表示将原字符串重复多次

  • 正常重复
"x".repeat(3);     // "xxx"
"hello".repeat(2);   // "hellohello"
登录后复制
  • 0
"x".repeat(0)    // ""
登录后复制
  • 小数 会被取整 向下取整
"x".repeat(2.5).  // "xx"
登录后复制
  • 负数 或 Infinity 报错
"x".repeat(-1)        // RangeError
"x".repeat(Infinity)  // RangeError
登录后复制
  • 在0和-1之间的负数。都被取整成0
"x".repeat(-0.3)         // ""
登录后复制
  • NaN 等同于0
"x".repeat(NaN)         // ""
登录后复制
  • 字符串 先转为数字
"x".repeat("2")    // "xx"
登录后复制

7. 实例方法:padStart(),padEnd()

7.1 作用

用于补全字符串,padStart()用于补全头部。padEnd()用于尾部补全。

两个参数:

  • 第一个:字符串补全生效的最大长度
  • 第二个:用来补全的字符串

7.2 传两个参数

  • 正常补全
&#39;xxx&#39;.padStart(5,"abc");   // "abxxx"
&#39;xxx&#39;.padEnd(5,"abc");     // "xxxab"
登录后复制
  • 原字符串长度 > 或 = 最大长度(即第一个参数),则不生效,返回原字符串
&#39;xxx&#39;.padStart(2,&#39;ab&#39;)     // "xxx"
&#39;xxx&#39;.padEnd(2,&#39;ab&#39;)       // "xxx"
登录后复制
  • 用来补全的字符串长度 > 最大长度 补全字符串会被截取
&#39;abc&#39;.padStart(10, &#39;0123456789&#39;)    // "0123456abc"
登录后复制

7.3 省略第二个参数

省略第二个参数,默认使用空格补全

&#39;x&#39;.padStart(4) 	// &#39;   x&#39;
&#39;x&#39;.padEnd(4) 		// &#39;x   &#39;
登录后复制

7.4 用途

  • 为数值补全指定位数
&#39;1&#39;.padStart(10,&#39;0&#39;)       // "0000000001"
&#39;123456&#39;.padStart(10, &#39;0&#39;) // "0000123456"
登录后复制
  • 提示字符串格式
&#39;12&#39;.padStart(10,&#39;YYYY-MM-DD&#39;)   // "YYYY-MM-12"
&#39;09-12&#39;.padStart(10, &#39;YYYY-MM-DD&#39;) // "YYYY-09-12"
登录后复制

8. 实例方法:trimStart(),trimEnd()

  • trimStart() 去掉字符串头部空格
  • trimEnd() 去掉字符串末尾的空格
const s = &#39;  abc  &#39;;

s.trim() // "abc"
s.trimStart() // "abc  "
s.trimEnd() // "  abc"
登录后复制

浏览器还部署了额外的两个方法,trimLeft()是trimStart()的别名,trimRight()是trimEnd()的别名。这两个用法与trimStart()和trimEnd()相同。

9. 实例方法:replaceAll()

9.1 replace()

只能替换第一个匹配

&#39;aabbcc&#39;.replace(&#39;b&#39;,&#39;_&#39;)    // aa_bcc
登录后复制

要想替换所有 b ,需要使用 /g 修饰符

&#39;aabbcc&#39;.replace(/b/g, &#39;_&#39;)    // &#39;aa__cc&#39;
登录后复制

9.2 replaceAll()

  • 第一个参数传字符串
&#39;aabbcc&#39;.replaceAll(&#39;b&#39;, &#39;_&#39;)         // "aa__cc"
登录后复制
  • 第一个参数传正则表达式 如果没有/g修饰符 replaceAll会报错
// 不报错
&#39;aabbcc&#39;.replace(/b/, &#39;_&#39;)

// 报错
&#39;aabbcc&#39;.replaceAll(/b/, &#39;_&#39;)
登录后复制
  • 第二个参数是一个字符串,表示替换的文本,其中可以使用一些特殊字符串。
// $& 表示匹配的字符串,即`b`本身
// 所以返回结果与原字符串一致
&#39;abbc&#39;.replaceAll(&#39;b&#39;, &#39;$&&#39;)
// &#39;abbc&#39;

// $` 表示匹配结果之前的字符串
// 对于第一个`b`,$` 指代`a`
// 对于第二个`b`,$` 指代`ab`
&#39;abbc&#39;.replaceAll(&#39;b&#39;, &#39;$`&#39;)
// &#39;aaabc&#39;

// $&#39; 表示匹配结果之后的字符串
// 对于第一个`b`,$&#39; 指代`bc`
// 对于第二个`b`,$&#39; 指代`c`
&#39;abbc&#39;.replaceAll(&#39;b&#39;, `$&#39;`)
// &#39;abccc&#39;

// $1 表示正则表达式的第一个组匹配,指代`ab`
// $2 表示正则表达式的第二个组匹配,指代`bc`
&#39;abbc&#39;.replaceAll(/(ab)(bc)/g, &#39;$2$1&#39;)
// &#39;bcab&#39;

// $$ 指代 $
&#39;abc&#39;.replaceAll(&#39;b&#39;, &#39;$$&#39;)
// &#39;a$c&#39;
登录后复制
  • 第二个参数除了可以是字符串外也可以是一个函数
&#39;aabbcc&#39;.replaceAll(&#39;b&#39;, () => &#39;_&#39;)   // &#39;aa__cc&#39;
登录后复制

更多编程相关知识,请访问:编程视频!!

以上就是ES6中值得了解的新增字符串方法的详细内容,更多请关注php中文网其它相关文章!

智能AI问答
PHP中文网智能助手能迅速回答你的编程问题,提供实时的代码和解决方案,帮助你解决各种难题。不仅如此,它还能提供编程资源和学习指导,帮助你快速提升编程技能。无论你是初学者还是专业人士,AI智能助手都能成为你的可靠助手,助力你在编程领域取得更大的成就。
来源:掘金--csdn来挖墙脚网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
最新问题
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号