ES6 문자열

ES6 문자열에 추가된 몇가지 메소드들을 살펴보겠습니다.

문자열 비교

‘Hello’.startsWith(‘He’) He로 시작하는지 확인합니다. endsWith는 끝나는지 확인합니다. 메소드 이름만 읽어도 무슨 뜻인지 알 수 있습니다. 영문 대소문자를 구별하니 주의합니다.

let myStr = 'Hello World';

// 앞부분 문자열 비교
console.log(myStr.startsWith('He'));

// 대소문자 구별한다
console.log(myStr.startsWith('he'));

// 뒷부분 문자열 비교
console.log(myStr.endsWith('ld'));

*실행결과
true
false
true

특정 인덱스를 설정할 수 있습니다. 인덱스는 0부터 시작합니다.

// 인덱스 2에서 시작하는지?
// 인덱스는 0: 'h', 1: 'e', 2: 'l', 3: 'l', 4: 'o'
console.log('hello'.startsWith('llo', 2));

// 인덱스 5에서 끝나는지? 4가 아니라 5이며
// 5 이상인 것은 true라는 것에 주의
console.log('hello'.endsWith('llo', 5));

*실행결과:
true
true

포함(include)여부를 확인합니다. startsWith와 마찬가지로 인덱스를 사용할 수 있습니다.

// 포함여부 확인
console.log('hello'.includes('lo'));

// 인덱스 2이상에서 false
console.log('hello'.includes('ell', 2));

*실행결과:
true
false

문자열 반복 repeat

// 문자열 반복하기
console.log('repeat it! '.repeat(3));

*실행결과:
repeat it! repeat it! repeat it!

유니코드 이스케이프

ES6는 16비트 이상의 유니코드 형식을 사용할 수 있습니다.

// ES6는 16비트 이외 형식도 사용가능
console.log('\u{2605}\u{31}\u{23E9}\u{D83D}\u{DE80}\u{1F680}'); // ES6

// ES5는 16비트 형식만 사용가능
console.log('\u2605\u0031\u23E9\uD83D\uDE80\u1F680'); // ES5

*실행결과:
★1⏩🚀🚀
★1⏩🚀Ὠ0

이터레이터(Iterator)

문자열 요소의 반복을 쉽게하는 이터레이터 입니다. 문자열 뿐 아니라 iterable(반복가능) Object들에 가능한 문법입니다.

// iterator (문자열 요소 반복)

for (const iterator of 'mango') {
    console.log(iterator);
}

*실행결과:
m
a
n
g
o

스프레드 연산자(spread operator)

문자열을 분리해서 바로 배열 오브젝트로 변환합니다. 상당히 편리한 연산자입니다.

// spread operator ... to Array

const myChars = [...'horse'];
console.log(myChars);

*실행결과:
(5) ['h', 'o', 'r', 's', 'e']
0: "h"
1: "o"
2: "r"
3: "s"
4: "e"
length: 5
...

reverse()

스프레드 연산자를 사용한 후 reverse 하면 유니코드 길이가 2개여도 순서가 유지됩니다

// ES6에서 거꾸로 변환하는 방법
// 유니코드 길이가 2개도 제대로 변환한다

const reverseStr = 'a\u{D83D}\u{DE80}b';

console.log(reverseStr);

// 스프레드 연산자를 사용해서 분리한 후 변환
console.log([...reverseStr].reverse());

// ES5에서는 그대로 거꾸로 돌린다. (깨져서 나옴)
const testStr = 'a\uD83D\uDE80b';
console.log(testStr.split('').reverse());

*실행결과:
a🚀b
(3) ['b', '🚀', 'a']
(4) ['b', '\uDE80', '\uD83D', 'a']

유니코드 크기 측정

유니코드의 사이즈 크기를 측정합니다. 유니코드 문자의 length와 문자열 요소의 length는 단위가 다르니 주의합니다.

let myUnicode = 'A\u{D83D}\u{DE80}\u{1F61C}\u{263B}';

// 각 유니코드 문자의 길이를 측정 (2바이트가 1개)

for (const ch of myUnicode) {
    console.log('- length of [' + ch + ']: ' + ch.length);
}

// 유니코드 문자열의 요소 개수. 32비트도 1개로 친다
console.log('- 문자열 요소의 크기: ' + [... myUnicode].length);

Code Point

ES6에서 제공하는 codepoint 메소드로 유니코드 16진수와 문자간 변환이 가능합니다.

// 16진수 문자열 아스키코드(유니코드)
console.log('boy'.codePointAt(0).toString(16));
console.log('boy'.codePointAt(1).toString(16));
console.log('boy'.codePointAt(2).toString(16));

// 문자로 변환
console.log(String.fromCodePoint(0x62));
console.log(String.fromCodePoint(0x6f));
console.log(String.fromCodePoint(0x79));

*실행결과:
62
6f
79
b
o
y

code point 메소드와 forof 를 사용하여 편리하게 코드를 해체하고 조립할 수 있습니다.

// forof 를 사용한 encoding

let tmpArr = [];

for (const ch of 'girl') {
    tmpArr.push(ch.codePointAt(0).toString(16));
}

console.log(tmpArr);

let tmpStr = [];
// decoding 하기
for (const iterator of tmpArr) {
    let tmp = '0x'+iterator;
    tmpStr.push( String.fromCodePoint(tmp));
}

// 다시 조립한다

console.log(tmpStr);
console.log(tmpStr.join(''));

*실행결과:
(4) ['67', '69', '72', '6c']
(4) ['g', 'i', 'r', 'l']
girl

요약

ES6 문자열에 특징적인 내용들을 살펴봤습니다. EcmaScript가 매년 업데이트를 하는 목표는 하위호환성을 유지하면서 더 좋은 언어 규약을 만들기 위해서 입니다. ES5와 ES6를 비교하여 최신 업데이트가 어떤 면에서 기존보다 더 나은지를 살펴보고 앞으로의 표준을 따르도록 하는 것이 미래적입니다.

물론 과거와의 호환성이 중요한 경우 바벨 컴파일러로 ES5의 호환성을 유지할 수도 있습니다. 자바스크립트의 역사가 복잡하기 때문에 프로젝트의 상황에 따라 판단해야 할 것 입니다.

홈으로

참고링크

String – JavaScript | MDN (mozilla.org)