ECMAScript 6 : 새로운 문자열 메소드 - String.Prototype.*

ES6 배열 메소드에 대한 이전 기사에서 ecmascript 6에서 배열 유형과 작동하는 새로운 방법을 소개했습니다. 이 튜토리얼에서는 문자열과 함께 작동하는 새로운 ES6 메소드에 대해 배우게됩니다. String.Prototype.* 우리는 몇 가지 예를 개발하고 이용 가능한 폴리 플릴을 언급 할 것입니다. 단일 라이브러리를 사용하여 모두 polyfill을 원한다면 Paul Miller의 ES6-Shim을 사용할 수 있습니다.

. 키 테이크 아웃

es6은 String.prototype.startswith (), String.prototype.endswith (), String.includes (), string.prototype.repeat () 및 string.raw를 포함하여 문자열 조작에 대한 몇 가지 새로운 방법을 소개합니다. ). 이 방법은 문자열이 특정 하위 문자열로 시작하거나 종료되는지 확인하는 것이 더 쉽고 효율적인 방법을 제공합니다. 문자열에 특정 하위 문자열이 포함되어 있으면 지정된 횟수의 문자열을 반복하고 템플릿 문자열을 처리합니다. the String.prototype.startSwith () 및 string.prototype.endswith () 메소드를 사용하면 문자열이 주어진 부분 문자열로 시작했는지 확인할 수 있습니다. 둘 다 하위 문자열과 위치를 매개 변수로 받아들이고 문자열이 제공된 서브 스트링으로 시작하는지 또는 종료 여부에 따라 참 또는 거짓을 반환합니다.

. string.prototype.includes () 메소드는 위치에 관계없이 문자열이 다른 문자열 내에 포함되면 true를 반환합니다. startswith () 및 endswith () 메소드와 동일한 매개 변수를 허용합니다. string.prototype.repeat () 메소드 Es6의 원래 문자열이 포함 된 새 문자열을 반복하여 지정된 숫자를 반복합니다. String.raw () 함수는 문자열을 컴파일하고 자리 표시기를 제공된 값으로 대체하는 템플릿 문자열의 태그 함수입니다.

String.prototype.startSwith () 모든 현대 프로그래밍 언어에서 가장 많이 사용되는 기능 중 하나는 문자열이 주어진 서브 스트링으로 시작하는지 확인하는 것입니다. ES6 이전에 JavaScript에는 그러한 기능이 없었기 때문에 직접 작성해야했습니다. 다음 코드는 개발자가 일반적으로 폴리 채식 방법을 보여줍니다

또는 또는 대안 :

이 스 니펫은 여전히 ​​유효하지만 새로 사용 가능한 string.prototype.startswith () 메소드가하는 일을 정확하게 재현하지 않습니다. 새로운 방법에는 다음 구문이 있습니다

당신은 서브 스트링 외에도 두 번째 인수를 받아 들인다는 것을 알 수 있습니다. SearchString 매개 변수는 문자열의 시작임을 확인하려는 부분 문자열을 지정합니다. 위치는 검색을 시작할 위치를 나타냅니다. 위치의 기본값은 0입니다. 문자열이 제공된 서브 스트링으로 시작하면 메소드가 true를 반환하고 그렇지 않으면 false입니다. 이 방법은 사례에 민감하므로 "Hello"는 "Hello"와 다릅니다.

이 방법의 예제는 다음과 같습니다

<span>if (typeof String.prototype.startsWith !== 'function') {
</span>  <span>String.prototype.startsWith = function (str){
</span>    <span>return this.indexOf(str) === 0;
</span>  <span>};
</span><span>}
</span>

이전 코드의 라이브 데모는 아래에 나와 있으며 JSBIN에서도 제공됩니다. 이 방법은 인터넷 익스플로러를 제외하고 노드 및 모든 최신 브라우저에서 지원됩니다. 이전 브라우저를 지원 해야하는 경우이 방법의 폴리 필드는 MDN의 메소드 페이지에 있습니다. 또 다른 Polyfill은 Mathias Bynens에 의해 개발되었습니다 String.prototype.endswith () string.prototype.startSwith () 외에 와 매우 유사합니다. 보시다시피,이 메소드는 string.prototype.startswith ()와 동일한 매개 변수를 받아들이고 동일한 유형의 값을 반환합니다. 차이점은 위치 매개 변수를 사용하면 문자열 내에서 문자열 이이 길이 긴 것처럼 검색 할 수 있다는 것입니다. 다시 말해, 우리가 끈 하우스가 있고 'house'. endswith ( 'us', 4)로 메소드를 호출한다면, 우리는 실제로 끈 하우스를 가지고 있었기 때문에 진실을 얻습니다 (누락 된“e”참고). . 이 방법의 예제는 다음과 같습니다

이전 스 니펫의 라이브 데모는 아래에 나와 있으며 jsbin에서도 사용할 수 있습니다. 이 방법은 인터넷 익스플로러를 제외하고 노드 및 모든 최신 브라우저에서 지원됩니다. 이전 브라우저를 지원 해야하는 경우이 방법의 폴리 필드는 MDN의 메소드 페이지에 있습니다. 또 다른 폴리 필은 Mathias Bynens에 의해 개발되었습니다.

String.prototype.includes () 한 문자열이 다른 문자열에 포함되어 있는지 확인하는 동안 String.prototype.includes () 메소드를 소개하겠습니다. 문자열이 다른 곳에 포함되면 참으로 반환됩니다. 그 구문은 다음과 같습니다

매개 변수의 의미는 string.prototype.startswith ()와 동일하므로 반복하지 않습니다. 이 방법의 사용 예는 다음과 같습니다

아래에서 그리고 jsbin에서도 라이브 데모를 찾을 수 있습니다. string.prototype.includes ()는 인터넷 익스플로러를 제외하고 노드 및 모든 최신 브라우저에서 지원됩니다. 이 튜토리얼에서 논의 된 다른 방법과 마찬가지로 구형 브라우저를 지원 해야하는 경우 Mathias Bynens (이 사람이 자신의 업무를 수행하는 방법을 알고 있습니다!)와 Mozilla Developer Network에서 제공하는 폴리 필을 찾을 수 있습니다.

. 참고 : 버전 48까지 Firefox는 비표준 이름이 포함되어 있습니다. String.prototype.Repeat () 이제 다른 유형의 메소드로 넘어 갑시다. String.prototype.repeat ()는 호출 된 것과 동일한 문자열을 포함하는 새 문자열을 반환하지만 지정된 숫자를 반복하는 메소드입니다. 이 방법의 구문은 다음과 같습니다

<span>if (typeof String.prototype.startsWith !== 'function') {
</span>  <span>String.prototype.startsWith = function (str){
</span>    <span>return this.indexOf(str) === 0;
</span>  <span>};
</span><span>}
</span>

시간 매개 변수는 문자열이 반복되어야하는 횟수를 나타냅니다. 0을 통과하면 빈 줄을 얻는 반면, 음수 또는 무한대를 전달하면 범위 오류를 얻게됩니다.

. 이 방법의 예제는 다음과 같습니다

이전 코드의 라이브 데모는 아래에 나와 있으며 jsbin에서도 사용할 수 있습니다. 이 방법은 인터넷 익스플로러를 제외하고 노드 및 모든 최신 브라우저에서 지원됩니다. 구형 브라우저를 지원 해야하는 경우이 방법에는 두 개의 폴리 필드를 사용할 수 있습니다. Mathias Bynens와 Mozilla 개발자 네트워크에서 개발 한 것. string.raw () 이 튜토리얼에서 다루려는 마지막 방법은 string.raw ()입니다. 템플릿 문자열의 태그 함수로 정의됩니다. 라이브러리를 템플릿하는 데 대한 교체품이기 때문에 흥미 롭습니다. 실제로 라이브러리를 실제로 교체 할만 큼 확장 할 수는 없지만 100% 확신하지는 않습니다. 그러나 아이디어는 기본적으로 우리가 곧 볼 수있는 것과 동일합니다. 그것이하는 일은 문자열을 컴파일하고 모든 자리 표시자를 제공된 값으로 교체하는 것입니다.

그것의 구문은 다음과 같습니다 (백 티크 참고) :

templatestring 매개 변수는 처리 할 템플릿이 포함 된 문자열을 나타냅니다. 이 개념을 더 잘 이해하려면 구체적인 예를 보자.

<span>if (typeof String.prototype.startsWith !== 'function') {
</span>  <span>String.prototype.startsWith = function (str){
</span>    <span>return this.substring(0, str.length) === str;
</span>  <span>};
</span><span>}
</span>

이전 코드의 라이브 데모는 아래에 나와 있으며 jsbin에서도 사용할 수 있습니다. 이 방법은 오페라 및 인터넷 익스플로러를 제외한 노드 및 모든 최신 브라우저에서 지원됩니다. 이전 브라우저를 지원 해야하는 경우 NPM에서 사용할 수있는 폴리 필드를 사용할 수 있습니다.

결론 이 튜토리얼에서는 문자열과 함께 작동하는 ECMAScript 6에 도입 된 몇 가지 새로운 방법에 대해 배웠습니다. 우리가 다루지 않은 다른 방법으로는 string.fromCodePoint (), string.prototype.codepointat () 및 string.prototype.normanize ()입니다. 이 기사를 즐겼으며 ECMAScript 6에 대한 자세한 내용을 배우기 위해 우리 채널을 계속 따라 가기를 바랍니다. es6 문자열 메소드 에 대한 질문이 자주 묻습니다 ecmascript 2015라고도 알려진 ES6에 도입 된 새로운 문자열 메소드는 무엇입니까?

es6는 문자열 조작을보다 쉽고 효율적으로 만들기 위해 몇 가지 새로운 문자열 메소드를 도입했습니다. 여기에는 startswith (), endswith (), contacture (), repore () 및 템플릿 리터럴과 같은 메소드가 포함됩니다. startswith () 메소드는 문자열이 지정된 문자열로 시작하는지 확인하고 endswith ()는 문자열이 지정된 문자열로 끝 있는지 확인합니다. 포함 () 메소드는 문자열에 지정된 문자열이 포함되어 있는지 확인합니다. 반복 () 메소드는 지정된 횟수를 문자열을 반복합니다. 템플릿 리터럴은 $ {} syntax를 사용하여 문자 그럴에 표현식을 포함시킬 수 있습니다. startswith () 메소드가 es6에서 어떻게 작동합니까?

es6의 startswith () 메소드는 문자열이 지정된 문자열의 문자로 시작하는지 여부를 결정하는 데 사용됩니다. 문자열이 지정된 문자열로 시작하고 그렇지 않으면 false로 시작하면 true가 반환됩니다. 구문은 str.startswith (searchString [, position])입니다. SearchString은 STR의 시작시 검색 할 문자입니다. 선택 사항 인 위치는 검색을 시작 해야하는 문자열의 위치입니다. 생략하면 검색이 문자열의 시작 부분에서 시작됩니다.

es6의 endswith () 메소드는 무엇입니까? 지정된 문자열의 문자로. 문자열이 지정된 문자열로 끝나고 그렇지 않으면 false로 끝나면 true가 반환됩니다. 구문은 str.endswith (searchString [, length])입니다. SearchString은 STR의 끝에서 검색 할 문자입니다. 선택 사항 인 길이는 검색 할 문자열의 길이입니다. 생략되면 문자열의 길이가 사용됩니다.

contuary () 메소드가 es6에서 작동하는 방법은?

es6의 포함 () 메소드가 하나의 문자열인지 여부를 결정하는 데 어떻게 사용됩니까? 다른 문자열 내에서 발견됩니다. 문자열에 지정된 문자열이 포함되어 있고 그렇지 않으면 false가 포함되어 있으면 true를 반환합니다. 구문은 str.includes (searchString [, position])입니다. SearchString은 검색 할 문자열입니다. 선택 사항 인 위치는 검색을 시작할 문자열 내의 위치입니다. 생략하면 문자열의 시작 부분에서 검색이 시작됩니다.

es6의 repect () 메소드는 무엇입니까?

es6 구성의 반복 () 메소드가 포함 된 새 문자열을 반환합니다. 문자열의 지정된 수의 사본이 호출되어 함께 연결되었습니다. 구문은 str.repeat (count)이며, 여기서 카운트는 문자열을 반복하는 횟수입니다. 카운트는 무한대보다 0 이하이어야하며 음수가 아니 었습니다.

eS6에서 템플릿 리터럴이 어떻게 작동합니까?

es6의 템플릿 리터럴은 내장 표현식을 허용하는 문자열 리터럴입니다. 멀티 라인 문자열과 문자열 보간 기능을 사용할 수 있습니다. 이들은 이중 또는 단일 따옴표 대신 Backtick () 문자로 둘러싸여 있습니다. 템플릿 리터럴에는 달러 표시와 곱슬 괄호 ($ {expression})로 표시된 자리 표시자를 포함 할 수 있습니다. 자리 표시 자와 그들 사이의 텍스트가 함수로 전달됩니다.

es6의 contuple ()과 indexof ()의 차이는 무엇입니까? ) 메소드에는 문자열에 지정된 문자열이 포함되어 있는지 확인하는 데 사용됩니다. 그러나 그들 사이에는 핵심 차이가 있습니다. 포함 () 메소드는 부울 값을 반환합니다 - 문자열에 지정된 문자열이 포함 된 경우, 그렇지 않으면 false. 한편, indexof () 메소드는 지정된 문자열의 첫 번째 발생 인덱스를 리턴합니다. 또는 문자열을 찾을 수없는 경우 -1.모든 브라우저에서 es6 문자열 메소드를 사용할 수 있습니까?

대부분의 최신 브라우저는 ES6 문자열 메서드를 지원합니다. 그러나 ES6을 지원하지 않는 이전 브라우저의 경우 Babel과 같은 트랜스 필러를 사용하여 ES6 코드를 ES5로 변환해야합니다. 이는 더 널리 지원되는 ES5로 변환해야합니다.

어레이와 함께 ES6 문자열 메소드를 어떻게 사용할 수 있습니까?
일부 ES6 문자열 메소드는 배열과 함께 사용할 수 있습니다. 예를 들어, 포함 () 메소드를 사용하여 배열에 특정 요소가 포함되어 있는지 결정할 수 있습니다. 그러나 모든 문자열 방법이 배열에 적용되는 것은 아닙니다. 각 방법의 특정 사용 및 제한 사항을 이해하는 것이 중요합니다.
ES6의 태그가 지정된 템플릿 리터럴은 무엇입니까?

ES6의 태그 된 템플릿 리터럴은 템플릿 리터럴의 고급 형태입니다. 태그가 지정된 템플릿을 사용하면 템플릿 리터럴을 함수로 구문 분석 할 수 있습니다. 태그 함수의 첫 번째 인수에는 문자열 값 배열이 포함됩니다. 나머지 주장은 표현과 관련이 있습니다. 태그 함수는 이러한 인수에 대한 작업을 수행하고 조작 된 문자열을 반환 할 수 있습니다.

위 내용은 ECMAScript 6 : 새로운 문자열 메소드 - String.Prototype.*의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!