찾다
웹 프론트엔드JS 튜토리얼ES6에서 알아둘 가치가 있는 새로운 문자열 메소드

이 글에서는 ES6 문자열의 새로운 메서드를 소개합니다. 이러한 메서드를 이해하면 도움이 될 것입니다.

ES6에서 알아둘 가치가 있는 새로운 문자열 메소드

1. String.fromCodePoint()

먼저 String.fromCharCode()를 언급해야 합니다. 두 메서드의 목적은 유니코드 코드를 해당 텍스트로 변환하는 것입니다. 그러나 String.fromCodePoint()는 String.fromCharCode()보다 개선되었습니다.

메서드 이름 js 버전 Difference
formCharCode es5 은 0xFFFF보다 큰 코드 포인트를 인식할 수 없어 오버플로가 발생합니다. fromCodePoint는 반대입니다
formCodePoint es6 여러 매개변수가 전달되면 매개변수가 문자열로 결합되어 반환되지만 fromCharCode는 그렇지 않습니다

ES6에서 알아둘 가치가 있는 새로운 문자열 메소드

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字符存储格式

ES6에서 알아둘 가치가 있는 새로운 문자열 메소드

ES6에서 알아둘 가치가 있는 새로운 문자열 메소드

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

s.codePointAt(0).toString(16)      // "20bb7"

3.3 用途

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

ES6에서 알아둘 가치가 있는 새로운 문자열 메소드

4. 实例方法:normalize()

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

ES6에서 알아둘 가치가 있는 새로운 문자열 메소드

&#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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명
이 기사는 掘金--csdn来挖墙脚에서 복제됩니다. 침해가 있는 경우 admin@php.cn으로 문의하시기 바랍니다. 삭제
es6怎么判断是否为数组es6怎么判断是否为数组Apr 25, 2022 pm 06:43 PM

在es6中,可以利用“Array.isArray()”方法判断对象是否为数组,若判断的对象是数组,返回的结果是true,若判断对象不是数组,返回的结果是false,语法为“Array.isArray(需要检测的js对象)”。

es6中遍历跟迭代的区别是什么es6中遍历跟迭代的区别是什么Apr 26, 2022 pm 02:57 PM

es6中遍历跟迭代的区别是:遍历强调的是要把整个数据依次全部取出来,是访问数据结构的所有元素;而迭代虽然也是依次取出数据,但是并不保证取多少,也不保证把所有的数据取完,是遍历的一种形式。

es6中怎么判断两个对象是否相等es6中怎么判断两个对象是否相等Apr 19, 2022 pm 03:34 PM

在es6中,可用Object对象的is()方法来判断两个对象是否相等,该方法检测两个变量的值是否为同一个值,判断两个对象的引用地址是否一致,语法“Object.is(对象1,对象2)”;该方法会返回布尔值,若返回true则表示两个对象相等。

es6怎么将数字转为字符串es6怎么将数字转为字符串Apr 19, 2022 pm 06:38 PM

转换方法:1、利用“+”给数字拼接一个空字符,语法“数字+""”;2、使用String(),可把对象的值转换为字符串,语法“String(数字对象)”;3、用toString(),可返回数字的字符串表示,语法“数字.toString()”。

es6中assign的用法是什么es6中assign的用法是什么May 05, 2022 pm 02:25 PM

在es6中,assign用于对象的合并,可以将源对象的所有可枚举属性复制到目标对象;若目标对象与源对象有同名属性,或多个源对象有同名属性,则后面的属性会覆盖前面的属性,语法为“Object.assign(...)”

es6怎么改变数组数据es6怎么改变数组数据Apr 26, 2022 am 10:08 AM

改变方法:1、利用splice()方法修改,该方法可以直接修改原数组的内容,语法为“数组.splice(开始位置,修改个数,修改后的值)”;2、利用下标访问数组元素,并重新赋值来修改数组数据,语法为“数组[下标值]=修改后的值;”。

sort排序是es6中的吗sort排序是es6中的吗Apr 25, 2022 pm 03:30 PM

sort排序是es6中的;sort排序是es6中用于对数组的元素进行排序的方法,该方法默认不传参,按照字符编码顺序进行排序,排序顺序可以是字母或数字,并按升序或降序,语法为“array.sort(callback(a,b))”。

import as在es6中的用法是什么import as在es6中的用法是什么Apr 25, 2022 pm 05:19 PM

在es6中,import as用于将若干export导出的内容组合成一个对象返回;ES6的模块化分为导出与导入两个模块,该方法能够将所有的导出内容包裹到指定对象中,语法为“import * as 对象 from ...”。

See all articles

핫 AI 도구

Undresser.AI Undress

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

뜨거운 도구

드림위버 CS6

드림위버 CS6

시각적 웹 개발 도구

스튜디오 13.0.1 보내기

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

에디트플러스 중국어 크랙 버전

에디트플러스 중국어 크랙 버전

작은 크기, 구문 강조, 코드 프롬프트 기능을 지원하지 않음

SublimeText3 영어 버전

SublimeText3 영어 버전

권장 사항: Win 버전, 코드 프롬프트 지원!

ZendStudio 13.5.1 맥

ZendStudio 13.5.1 맥

강력한 PHP 통합 개발 환경