찾다
웹 프론트엔드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으로 문의하시기 바랍니다. 삭제
JavaScript의 역할 : 웹 대화식 및 역동적 인 웹JavaScript의 역할 : 웹 대화식 및 역동적 인 웹Apr 24, 2025 am 12:12 AM

JavaScript는 웹 페이지의 상호 작용과 역학을 향상시키기 때문에 현대 웹 사이트의 핵심입니다. 1) 페이지를 새로 고치지 않고 콘텐츠를 변경할 수 있습니다. 2) Domapi를 통해 웹 페이지 조작, 3) 애니메이션 및 드래그 앤 드롭과 같은 복잡한 대화식 효과를 지원합니다. 4) 성능 및 모범 사례를 최적화하여 사용자 경험을 향상시킵니다.

C 및 JavaScript : 연결이 설명되었습니다C 및 JavaScript : 연결이 설명되었습니다Apr 23, 2025 am 12:07 AM

C 및 JavaScript는 WebAssembly를 통한 상호 운용성을 달성합니다. 1) C 코드는 WebAssembly 모듈로 컴파일되어 컴퓨팅 전력을 향상시키기 위해 JavaScript 환경에 도입됩니다. 2) 게임 개발에서 C는 물리 엔진 및 그래픽 렌더링을 처리하며 JavaScript는 게임 로직 및 사용자 인터페이스를 담당합니다.

웹 사이트에서 앱으로 : 다양한 JavaScript 애플리케이션웹 사이트에서 앱으로 : 다양한 JavaScript 애플리케이션Apr 22, 2025 am 12:02 AM

JavaScript는 웹 사이트, 모바일 응용 프로그램, 데스크탑 응용 프로그램 및 서버 측 프로그래밍에서 널리 사용됩니다. 1) 웹 사이트 개발에서 JavaScript는 HTML 및 CSS와 함께 DOM을 운영하여 동적 효과를 달성하고 jQuery 및 React와 같은 프레임 워크를 지원합니다. 2) 반응 및 이온 성을 통해 JavaScript는 크로스 플랫폼 모바일 애플리케이션을 개발하는 데 사용됩니다. 3) 전자 프레임 워크를 사용하면 JavaScript가 데스크탑 애플리케이션을 구축 할 수 있습니다. 4) node.js는 JavaScript가 서버 측에서 실행되도록하고 동시 요청이 높은 높은 요청을 지원합니다.

Python vs. JavaScript : 사용 사례 및 응용 프로그램 비교Python vs. JavaScript : 사용 사례 및 응용 프로그램 비교Apr 21, 2025 am 12:01 AM

Python은 데이터 과학 및 자동화에 더 적합한 반면 JavaScript는 프론트 엔드 및 풀 스택 개발에 더 적합합니다. 1. Python은 데이터 처리 및 모델링을 위해 Numpy 및 Pandas와 같은 라이브러리를 사용하여 데이터 과학 및 기계 학습에서 잘 수행됩니다. 2. 파이썬은 간결하고 자동화 및 스크립팅이 효율적입니다. 3. JavaScript는 프론트 엔드 개발에 없어서는 안될 것이며 동적 웹 페이지 및 단일 페이지 응용 프로그램을 구축하는 데 사용됩니다. 4. JavaScript는 Node.js를 통해 백엔드 개발에 역할을하며 전체 스택 개발을 지원합니다.

JavaScript 통역사 및 컴파일러에서 C/C의 역할JavaScript 통역사 및 컴파일러에서 C/C의 역할Apr 20, 2025 am 12:01 AM

C와 C는 주로 통역사와 JIT 컴파일러를 구현하는 데 사용되는 JavaScript 엔진에서 중요한 역할을합니다. 1) C는 JavaScript 소스 코드를 구문 분석하고 추상 구문 트리를 생성하는 데 사용됩니다. 2) C는 바이트 코드 생성 및 실행을 담당합니다. 3) C는 JIT 컴파일러를 구현하고 런타임에 핫스팟 코드를 최적화하고 컴파일하며 JavaScript의 실행 효율을 크게 향상시킵니다.

자바 스크립트 행동 : 실제 예제 및 프로젝트자바 스크립트 행동 : 실제 예제 및 프로젝트Apr 19, 2025 am 12:13 AM

실제 세계에서 JavaScript의 응용 프로그램에는 프론트 엔드 및 백엔드 개발이 포함됩니다. 1) DOM 운영 및 이벤트 처리와 관련된 TODO 목록 응용 프로그램을 구축하여 프론트 엔드 애플리케이션을 표시합니다. 2) Node.js를 통해 RESTFULAPI를 구축하고 Express를 통해 백엔드 응용 프로그램을 시연하십시오.

JavaScript 및 웹 : 핵심 기능 및 사용 사례JavaScript 및 웹 : 핵심 기능 및 사용 사례Apr 18, 2025 am 12:19 AM

웹 개발에서 JavaScript의 주요 용도에는 클라이언트 상호 작용, 양식 검증 및 비동기 통신이 포함됩니다. 1) DOM 운영을 통한 동적 컨텐츠 업데이트 및 사용자 상호 작용; 2) 사용자가 사용자 경험을 향상시키기 위해 데이터를 제출하기 전에 클라이언트 확인이 수행됩니다. 3) 서버와의 진실한 통신은 Ajax 기술을 통해 달성됩니다.

JavaScript 엔진 이해 : 구현 세부 사항JavaScript 엔진 이해 : 구현 세부 사항Apr 17, 2025 am 12:05 AM

보다 효율적인 코드를 작성하고 성능 병목 현상 및 최적화 전략을 이해하는 데 도움이되기 때문에 JavaScript 엔진이 내부적으로 작동하는 방식을 이해하는 것은 개발자에게 중요합니다. 1) 엔진의 워크 플로에는 구문 분석, 컴파일 및 실행; 2) 실행 프로세스 중에 엔진은 인라인 캐시 및 숨겨진 클래스와 같은 동적 최적화를 수행합니다. 3) 모범 사례에는 글로벌 변수를 피하고 루프 최적화, Const 및 Lets 사용 및 과도한 폐쇄 사용을 피하는 것이 포함됩니다.

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 옷 제거제

Video Face Swap

Video Face Swap

완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!

뜨거운 도구

메모장++7.3.1

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

Atom Editor Mac 버전 다운로드

Atom Editor Mac 버전 다운로드

가장 인기 있는 오픈 소스 편집기

MinGW - Windows용 미니멀리스트 GNU

MinGW - Windows용 미니멀리스트 GNU

이 프로젝트는 osdn.net/projects/mingw로 마이그레이션되는 중입니다. 계속해서 그곳에서 우리를 팔로우할 수 있습니다. MinGW: GCC(GNU Compiler Collection)의 기본 Windows 포트로, 기본 Windows 애플리케이션을 구축하기 위한 무료 배포 가능 가져오기 라이브러리 및 헤더 파일로 C99 기능을 지원하는 MSVC 런타임에 대한 확장이 포함되어 있습니다. 모든 MinGW 소프트웨어는 64비트 Windows 플랫폼에서 실행될 수 있습니다.

스튜디오 13.0.1 보내기

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

WebStorm Mac 버전

WebStorm Mac 버전

유용한 JavaScript 개발 도구