[ES6 노트] 문자열과 템플릿 문자열

원래 이 노트는 원서처럼 문자열과 정규를 함께 정리한 결과 하나의 템플릿 문자열이 매우 길다는 것을 발견했다. 그러면 문자열만 쓰는 것이 좋겠다. 정규는 새로운 내용이 적고 간단하기 때문에 단독으로 쓰지 않겠다.
문자열 새 API

코드PointAt()는 비BMP 문자 부호화 문제(BMP, Basic Multilingual Plane 기본 다문종 평면)를 해결합니다.UTF-16에서 16비트 인코딩 단원으로 범위를 표시할 수 있는 문자를 BMP라고 하는데, ES5에서는 자신이 입은 인코딩 결과를 예상대로 얻을 수 없기 때문에 ES6에 코드포닛 At()를 도입해 이 문제를 해결했다.

let text = '';
console.log(text.charAt(0))  // ''
console.log(text.charAt(1))  // ''
console.log(text.charCodeAt(0))  // 55362
console.log(text.charCodeAt(1))  // 57271
console.log(text.codePointAt(0))  // 134071
console.log(text.codePointAt(1))  // 57271

String.fromCodePoint() codePointAt()의 역작동 방법

console.log(String.fromCodePoint(134071));   // ''

normalize()는 자신의 열을 비교하기 전에 같은 형식으로 표준화하고 기본'NFC'

NFC: 표준 등가로 분해한 후 표준 등가로 재구성

NFD: 표준 등가 방식으로 분해

NFKC: 호환 등가 방식으로 분해

NFKD: 등가 호환 분해

includes () 문자열에서 지정한 텍스트가 검출되면true를 되돌려줍니다. 그렇지 않으면false를 되돌려줍니다.

startWith() 문자열의 시작 부분에서 지정한 텍스트가 감지되면true를 반환하고 그렇지 않으면false를 반환합니다.

endWidth() 문자열의 끝 부분에서 지정한 텍스트가 감지되면true를 반환하고 그렇지 않으면false를 반환합니다.상기 세 가지 방법은 모두 두 개의 매개 변수를 수신한다. 첫 번째 매개 변수는 검색할 텍스트를 지정한다.두 번째 매개변수는 검색을 시작할 위치의 색인 값을 지정하는 옵션입니다.endWith () 방법은 이 인덱스 값에서 검색할 텍스트의 길이를 뺀 위치부터 정방향으로 일치합니다.

let message = 'hello world!';

console.log(message.includes('o'));  //true            “o”
console.log(message.startWith('hello'));  //true      ‘hello’  
console.log(message.endWith('!'));  //true      “！”  

console.log(message.startWith('o',4));   //true        4    “o”
console.log(message.endWidth('o',8));   //true         7 “o”    8          1         ，    7   “o”   
console.log(message.includes('o',8));   //false     8      ，    “o”

템플릿 글자량
템플릿의 글자 양도 문자열의 확장이라고 할 수 있지만 비교적 중요하고 실용적이기 때문에 단독으로 열거하여 필기를 한다.문제 해결: 1.여러 줄 문자열: 공식적인 여러 줄 문자열의 개념ES5에서 처리해야 할 문자열이 비교적 길면 줄을 바꾸는 것이 비교적 번거롭다.2. 기본 문자열 포맷: 변수의 값을 문자열에 삽입하는 능력.ES5는 문자열에 변수를 추가할 때 주로'+'로 연결한다.3. HTML 이스케이프: 안전하게 변환된 문자열을 HTML에 삽입하는 기능전방의 XXS 공격을 효과적으로 해결했다.

기초 문법: 싱글 더블 따옴표

를 반따옴표(`)로 바꾸다

let  message = ` hello world ! `;
console.log(message); //  hello world ! 

여러 줄 문자열

let  message = ` hello world !
This is ES6!`;
console.log(message); 
// hello world ! 
//This is ES6!
*hello          ，               

자리 차지 문자: ${변수}는 우리가 자주 사용하는 자리 차지 문자입니다. 변수 부분은 JS의 임의의 표현식으로 바꿀 수 있습니다.

let name = 'King';
let message = ' Hello, ${name}';
console.log(message) ;  //Hello,King

라벨 템플릿코드부터 보시면 라벨 템플릿이 무엇인지 더 잘 이해할 수 있습니다.

let name = 'King';
let language = 'ES6';
let message = tag`Hello ${name},
 welcome to ${language} world!`;

function tag(literals,...substitutions){
  *         ，                     。
  *          ，  JS           ，                    。

   console.log(`literals:`,literals);
   //["Hello ", ",↵ welcome to ", " world!", raw: ["Hello ", ",
 welcome to ", " world!"]]
   * literals:                  ，     ，
                 ，         ？     ，   。
   *   ，    raw     ，      ，   message         。
        literals[0]        ，
     literals[1]            ，
     literals[2]     world       。
       ，literals     ${  }         。
          literals[1]  message     ‘
’        ，      '
'   。
   *  ，                      ？ES6             。
                   raw  ，    ES6            ，                   。
         ：literals[1]       literals.raw[1]
     literals[1]        ==> ",↵ welcome to "   //       
     literals.raw[1]    ==> ",
 welcome to "  //     

   console.log(`substitutions:`,substitutions);
   //["King", "ES6"]
   * substitutions：            ，                     。
}

위에서 이렇게 긴 해석 내용을 썼는데, 일부 학우들은 아직도 비교적 곤혹스러울 수 있는데, 이 라벨 템플릿은 도대체 무슨 소용이 있습니까?사실은 템플릿 글씨체의 각 항목을 분리하면 당신을 더욱 자유롭게 하거나 복잡하게 이 정보를 처리할 수 있고 그 안에 업무에 유용한 정보를 추가할 수 있다.예를 들어 함수에서substitutions의 두 번째 값을 판단하고 만약 값이 ES6라면 그것을Javascript로 바꾸고literals와substitutions의 각 항목을 다시 조합하면 출력 결과는 "Hello King,welcome to Javascript world!"로 변한다.물론 이것은 단지 하나의 예일 뿐, 실제로는 틀림없이 나처럼 이렇게 심심하지 않을 것이다.
주의: 여기 몇 가지 팁이 있습니다

literals[0]는 항상 문자열의 시작이다. 위의 메시지를 tag${name},
welcome to ${language} world!로 바꾸면 literals[0]의 값은'빈 문자열'이 된다. 마치literals[literals.length-1]는 항상 문자열의 끝과 같다.

상단에 따라substitutions의 수량은literals의 수량보다 한 개 적다는 것을 정리할 수 있다.:substitutions.length===literals.length-1의 결과는 총true입니다.

탭 템플릿 함수 내부는substitutions를 사용하는 것을 권장합니다.length는 순환 계수를 하고literals를 사용합니다.length는 종종 경계를 넘는다.

String.raw: 템플릿 글씨체에 원시 값을 사용하여 템플릿의 원본 형식을 출력합니다.

let message1 = `Hello
World`;
let message2 = String.raw`Hello
World`;

console.log(message1);
//Hello
//World
console.log(message2); //Hello
World