ES6(4) 문자열에 대한 깊이 있는 괄호

제4장 문자열의 괄호

ES6는 유니코드 지원을 강화하고 문자열 객체를 확장합니다.이 장에서는 ES6의 객체 메소드 괄호에 중점을 두고 문자 유니코드 표현의 강화에 대해서는 자세히 설명하지 않으려고 합니다.이 장은 주로 다음과 같습니다.

템플릿 문자열 및 레이블 템플릿

문자열 괄호 방법

문자의 유니코드 표현(소개)

4.1 템플릿 문자열 및 템플릿 레이블

템플릿 문자열

제1장에서 우리는 템플릿 문자열의 사용 방법을 대체적으로 소개했으니 먼저 되돌아봅시다.
템플릿 문자열을 사용하면 문자열에서 변수를 쉽게 바꿀 수 있습니다.템플릿을 사용할 때 가장 바깥쪽은 '번호 (인덱스) 이고 변수는 패키지를 사용합니다. {} 의 괄호에는 임의의 표현식이 있을 수 있습니다. 표현식의 반환 값이 문자열이 아니라면 일반적인 규칙에 따라 문자열로 바꿉니다. 예를 들어 괄호에 대상이 있다면 기본적으로 대상의 toString 방법을 사용합니다.

let name = 'Kyle';
let foo = ` ${name} ES6`;

예를 들면 다음과 같습니다.

let student = {
    name : 'Kyle',
    toString: function () {
        return 'Agent' + this.name
    }
};
let foo = ` ${student} ES6`;
console.log(foo); //  ： AgentKyle ES6

이것은 ES5에서 줄을 바꾸고 변수를 도입하는 자질구레한 불편을 해결했다.다음은 템플릿 문자열 결합과 일반 문자열 결합DOM을 사용하여 페이지에 삽입한 예입니다. 전자가 훨씬 편리하다는 것을 알 수 있습니다.

let arr = ['first', 'second', 'third'];

let ul = `

            
${arr[0]}
            
${arr[1]}
            
${arr[2]}
         
`;

let normalUl = '
\
                    
'+arr[0]+'
\
                    
'+arr[1]+'
\
                    
'+arr[2]+'
\
                
';

document.getElementById('container').innerHTML = ul;
document.getElementById('normal-container').innerHTML = normalUl;

위 코드가 사용한 두 가지 방식이 보여준 최종 효과는 일치하지만, 현재 우리는 약간의 수정을 해서 다음 두 개의 innerHTML을 innerText로 바꾸고 결과를 실행합니다.
템플릿 문자열을 사용하여 여러 줄 문자열을 표시하면 모든 공백과 들여쓰기가 출력에 유지됩니다.원본 코드를 보면 브라우저가 처리할 때 br 탭을 사용했음을 알 수 있습니다.

태그 템플릿

탭 템플릿은 사실 템플릿이 아니라 함수의 호출 방식입니다.태그는 사실 함수이며 형식은 다음과 같습니다.

 ` `

태그 함수는 기본적으로 여러 개의 매개 변수를 주입합니다. 첫 번째 매개 변수는 하나의 수조입니다. 그 중의 요소는 템플릿 문자열의 비변수와 변수 사이의 각 부분이고, 다음 매개 변수는 템플릿 문자열의 변수가 바뀐 값입니다.템플릿 문자열에 n개의 변수가 있으면 탭 함수에 n+1개의 인자가 있을 것이 분명합니다.이것은 약간 추상적으로 들릴 수 있다. 우리는 아래의 예를 보면 일목요연하다.

let student = {
    id:'2014556698',
    name:'AgentKyle'
};

function tagFun(arr, ...args) {
    arr.forEach((item) => {
        console.log(item);
    });

    args.forEach((item) => {
        console.log(item);
    })

    return 'ok!'
}

tagFun` :${student.name}, id:${student.id};`;  // =>ok!

실행 결과, 콘솔 출력:

 ：
， id:
;
2014556698
AgentKyle

탭 함수 첫 번째 매개 변수 그룹의 마지막 요소를 주의해야 합니다. 마지막 변수가 템플릿 문자열의 끝부분까지 표시됩니다. 위의 예에서 이 부분은 ;（ ）입니다.그러나 이 부분에 아무것도 없으면 템플릿이 끝납니다. 마지막 요소는 ''（ ） 입니다.템플릿 태그 표현식의 최종 반환 값, 즉 태그 함수의 반환 값입니다.
다음 태그 함수는 템플릿 태그를 사용하지 않는 것과 같은 채우기 템플릿을 반환합니다.

function tagFun() {

    let str = '',
        strArr = arguments[0];

    for(let i = 0; i

라벨 템플릿을 도입하는 목적은 템플릿 문자열 자체를 더욱 유연하게 제어하는 데 있다. 예를 들어 안전 문제를 일으키기 쉬운 위험 문자를 제거하고 템플릿 문자를 국제화하는 등이다.
또한 템플릿 레이블을 사용하여 JS 언어에 다른 언어를 포함할 수 있습니다.

jsx`

`

위에서 jsx 함수를 통해 DOM 문자열을 React 대상으로 변환합니다.github에서 jsx 함수의 원본 코드를 찾을 수 있습니다.
그 밖에 탭 함수의 첫 번째 매개 변수는 row 속성을 가지고 있는데, 이것은 숙주 수조와 거의 똑같은 수조이며, 유일한 차이점은 문자열 요소의 반사선이 모두 번역되었다는 것이다. (앞에\가 붙었다.)스트링 구조기도 스트링을 원생적으로 제공했다.백슬래시가 번역되는 문자열을 생성하는 데 사용되는 row 정적 방법:

String.row`hello world
${1+1}` // => hello world\
2
String.row'\u000A!' // => \\u000A 

4.2 문자열의 확장 방법

includes,startsWith,endsWith

ES5에서는 문자열 세그먼트가 다른 문자열에 포함되어 있는지 여부를 판단하려고 할 때 일반적으로 IndexOf를 사용하는 방법을 고려합니다.

"But those who wait for the Lord will renew their strength".indexOf('shall') // =>-1

일치하는 위치가 성공하면 일치하는 위치로 돌아갑니다.존재하지 않으면 -1로 돌아갑니다.물론 좋지만 문제는 A열이 B열에 포함되었는지 알고 싶을 뿐 어디에 있는지 알고 싶지 않다는 것이다.또한 일치 실패 시 -1로 되돌아오는 특성은 인코딩의 양과 오류가 발생할 확률을 증가시킵니다.

var flag = "But those who wait for the Lord will renew their strength".indexOf('shall') 
if(flag === -1){}
if(flag){} //  ， 

ES6는 다음과 같은 3가지 새로운 방법을 제공합니다.

includes (): 문자열을 찾았는지 여부를 표시하는 브리 값을 되돌려줍니다

startsWith(): 부울 값을 반환하여 매개변수 문자열이 소스 문자열의 시작에 있는지 여부를 나타냅니다

.

endsWith(): 매개변수 문자열이 소스 문자열의 끝에 있는지 여부를 나타내는 부울 값을 반환합니다

.
그것들은 모두 두 번째 매개 변수를 받아들여 검색 범위를 제어할 수 있지만, endsWith는 다른 방법과 달리, 다른 두 가지 방법은 모두 규정된 인덱스에서 문자열의 끝까지 일치하며, endsWith는 문자열의 시작부터 규정된 인덱스의 중간 부분까지 검색한다.다음은 몇 가지 예입니다.

let str = "But those who wait for the Lord will renew their strength";
console.log(str.includes('will')); //t
console.log(str.includes('will',40)); //f
console.log(str.startsWith('But'));//t
console.log(str.startsWith('but')); //f  
console.log(str.startsWith('those',4)); // t  4， 5， 
console.log(str.endsWith('those')); // f
console.log(str.endsWith('those',9)); // t  9， 8， 

모든 인덱스는 시작 인덱스만 포함하는 위치이고 끝 인덱스는 포함하지 않습니다

repeat

때때로 우리는 문자열을 n번 누적하려고 한다.

let str = 'hello';
let repeatedStr = function (n) {
    let newStr = '';
    for (let i = 0; n < 5; i++) {
        newStr+=str;
    }
    return newStr;
}(5);
console.log(repeatedStr);

ES6는 기본 솔루션을 제공합니다.

let repeatedStr = str.repeat(5);

그것은 수치형 파라미터를 받아들여 소수로 들어오면 아래로 정돈한다.0에서 -1 사이의 소수는 정돈한 후 0, 즉 0과 같다.문자열 형식의 수를 가져오면, 먼저 수치 형식으로 변환해서 계산합니다.NaN 매개변수는 0과 같습니다.
매개변수가 0에서 -1 사이의 음수 또는 Infinity가 아닌 경우 오류가 보고됩니다.

4.3 문자의 유니코드 표현

JS 내부에서 문자는 UTF-16 형식으로 저장되며 일반적으로 문자마다 2바이트로 고정된다.또한 JS에서는 문자를\uxxx 형식으로 표시할 수 있으며 여기서 xxx는 부호점을 나타낸다.예를 들면 다음과 같습니다.

    console.log('\u0061') //=> a
    console.log('\u0061'==='a');

그러나 이 표현은\u0000-\uFFF 사이의 문자로만 제한됩니다.이 범위를 초과한 문자는 반드시 두 바이트 형식으로 표현해야 한다.예를 들어'㎡'자에 대응하는 부호점은 다음과 같다\uD842\uFB7.
ES6에서는 0xFFF를 초과하는 숫자를 괄호 안에 부호화하기만 하면\u 뒤에 바로 따라갈 수 있습니다.

\u{20BB7} \\=>��

그러나 이러한 필요 문자는 실제로 네 바이트가 필요하기 때문에 ES5의 일부 방법에 오류가 발생할 수 있다.예를 들면 다음과 같습니다.

var c = '��c'
c.length // =>2
c.charAt(0) // =>''
c.charAt(1) // =>''  
c.charAt(2) // =>c
c.charCodeAt(0) //=>55362
c.charCodeAt(1) //=> 57271

ES6는 이 문제를 해결할 수 있는 적절한 방법을 제공합니다.

//  codePointAt charCodeAt
c.codePointAt(0) // => 134071  ， ， 16 ， toString(16)
c.codePointAt(1) // => 57271  
c.codePointAt(2) // 97  a ， ， 2

//  at charAt
c.at(0) // =>'��'  ES7