> 웹 프론트엔드 > JS 튜토리얼 > es6에 대한 기본 소개 - 문자열 확장

es6에 대한 기본 소개 - 문자열 확장

零下一度
풀어 주다: 2017-05-16 10:04:17
원래의
1459명이 탐색했습니다.

1 for...of 문자열 탐색 인터페이스

for(let i of "abc"){
    console.log(i);
}
// a
// b
// c
로그인 후 복사

2 포함 문자열 포함 여부, 부울 값 반환

형식: str.includes(searchString[, position])
indexOf와의 비교:
indexOf: 문자열이 포함되는지 여부를 결정하는 아래 첨자를 반환합니다. 아래 첨자는
includes 문자열의 위치입니다. 특정 문자열이 포함되어 있는지 여부에 대한 부울 값을 반환합니다. 문자열이 포함되어 있는지 여부만 확인하는 경우 이 방법이 가능합니다.

var s = "hello";
// es5
s.indexOf("o"); // 4
// es6
s.includes("o"); // true
s.includes("d"); // false
s.includes("h", 2); // false 从第三个字符开始找
로그인 후 복사

3 startWith 매개변수 문자열이 소스 문자열의 선두에 있는지 여부는 부울 값을 반환합니다.

형식: str.startsWith(searchString[, position])

var s = "hello world";
// es5
s.indexOf("hello"); // 0 等于0表示就在源字符串头部
// es6
s.startsWith("hello"); // true
s.startsWith("world"); // false
s.startsWith("world", 6); // true
로그인 후 복사

4 endWith는 매개변수 문자열이 소스 문자열의 끝에 있는지 여부를 나타내는 startWith의 반대이며 부울 값

형식을 반환합니다: str.endsWith(searchString[, position])

var s = "hello world";
// es5
String.prototype.endWith=function(endStr){
  var d=this.length-endStr.length;
  return (d>=0&&this.lastIndexOf(endStr)==d)
}
s.endWith("world"); // true
// es6
s.endsWith("world"); // true
s.endsWith("world", 5); // false
s.endsWith("hello", 5); // true
로그인 후 복사

5peat 원래 문자열을 n번 반복하고 새 문자열을 반환합니다.

var s = "s";
s.repeat(3); // sss
s.repeat(2.6); // ss 小数会被取整
s.repeat(-2); // RangeError 报错
s.repeat(0); // ""
로그인 후 복사

6 템플릿 문자열은 백틱(`)으로 식별되는 문자열의 향상된 버전입니다.

일반 문자열로 사용할 수도 있고 여러 줄 문자열을 정의하는 데 사용할 수도 있고 문자열에 변수를 삽입하는 데 사용할 수도 있습니다. 더 이상 문자열을 연결해야 합니다. 이제 템플릿 문자열 내에서 변수 사용을 사용할 수 있습니다.

// es5 输出模板通常是如下格式,相当繁琐还不方便
var name="Bob",time="today";
var resultStr = "hello "+name+", how are you "+time+'?'; //hello Bob, how are you today?
// es6 模板字符串
console.log(`string text line 1
string text line 2`);
//string text line 1
//string text line 2

// 直接用${变量名}表示
`Hello ${name}, how are you ${time}?` // Hello Bob, how are you today?
// 使用表达式
var obj={a:1,b:2};
`${obj.a+obj.b}` // 3
// 使用函数
function fn() {
  return "Hello World";
}
`this is fn return str: ${fn()}` // this is fn return str: Hello World
로그인 후 복사

es6의 문자열 변경 및 확장에 대한 자세한 내용은 MDN 공식 홈페이지를 확인하세요

[관련 권장 사항]

특별 추천: "php Programmer Toolbox" V0.1 버전 다운로드

2. 무료 js 온라인 동영상 튜토리얼

3. php.cn Dugu Jiujian (3) - JavaScript 동영상 튜토리얼

위 내용은 es6에 대한 기본 소개 - 문자열 확장의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿