1. Unicode, ES5호환성
Unicode
•
유니코드는 U+0031형태입니다.
•
코드 포인트(code point)
◦
0031이 코드포인트이고 문자 코드라고도 부릅니다.
◦
코드 포인트로 문자/이모지 등을 표현합니다.
◦
4자리 이상의 UTF-16진수 형태입니다.
•
110만개 정도가 표현 가능합니다.
◦
U+0000 ~ U+10FFFF
•
plane(평면)
◦
코드 포인트 전체를 17개 plane으로 나눔.
◦
하나의 plane은 65535(U+FFFF)개
•
첫 번째 plane
◦
BMP(Basic Multillingual Plane)라고 부름
◦
일반적인 문자(영문자, 숫자)가 여기에 속합니다.
◦
한글의 코드 포인트도 여기에 속합니다.
•
첫 번째 plane을 제외한 plane
◦
Supplementary plane, Astral plane이라고 부릅니다.
◦
5자리 이상의 코드 포인트를 표현할 수 있습니다.
◦
ES6+ 에서 지원합니다.
•
이스케이프 시퀀스(Escape Sequence)
◦
역슬래시와 16진수로 값을 작성합니다.
◦
이를 16진수 이스케이프 시퀀스라 부릅니다.
⇒ 역슬래시가 에디터에 "\" 형태로 표시됩니다.
⇒ x를 소문자로 작성하며 역슬래시를 한 번 더 쓰면 escape문법이되어 역슬래기 표현이 가능합니다.
const escape = "\x31\x32\x33";
console.log(escape);//123
console.log("\\");//\
JavaScript
복사
•
유니코드 이스케이프 시퀀스
◦
Unicode Escape Sequence
◦
이스케이프 시퀀스를 유니코드로 작성한 형태입니다.
const escape = "\x31\x32\x33";
console.log(escape);//123
const unicode = "\u0034\u0035\u0036";
console.log(unicode);//456
JavaScript
복사
•
USE값 범위
◦
UTF-16진수로 U+0000에서 U+FFFF까지 사용 가능합니다.
•
ES5 문제점
◦
U+FFFF보다 큰 코드를 어떻게 작성할 것인가?
◦
유니코드 코드 포인트 이스케이프
▪
코드 포인트 값에 관계없이 사용할 수 있는 형태가 필요합니다.
▪
\u{31}, \u{1f418}형태
const unicode = "\u0034\u0035\u0036";
console.log(unicode);//456
const es6 = "\u{34}\u{35}\u{36}";
console.log(es6);//456
console.log("\u{1f418}");//🐘
JavaScript
복사
ES5호환성
•
Surrogate pair
◦
\u{1f418}형태를 ES5에서 사용 불가
◦
ES5에서는 두 개의 유니코드 이스케이프 시퀀스를 사용합니다.
◦
이를 Surrogate pair라고 합니다.
const pair = "\uD83D\uDC18";
console.log(pair);//🐘
JavaScript
복사
\uD83D와 \uDC18를 연결하여 작성합니다.
•
Surrogate pair계산 방법
•
2. Unicode 함수: fromCodePoint(), codePointAt(), normalize()
fromCodePoint()
•
형태: String.fromCodePoint(num1[, ...[, numN]])
•
파라미터: 코드 포인트, num1[,...[,numN]]
•
반환: 코드 포인트에 해당하는 문자로 변환
•
유니코드의 코드 포인트에 해당하는 문자를 반환하는 함수
•
파라미터에 다수의 코드 포인트 작성이 가능합니다.
◦
문자를 연결하여 반환
⇒ 49, 50, 51은 코드 포인트를 10진수로 작성한 형태
⇒ 0x31, 0x32, 0x33은 코드 포인트를 16진수로 작성한 형태
const point = String.fromCodePoint;
console.log(point(49, 50, 51));
console.log(point(44032, 44033));
console.log(point(0x31, 0x32, 0x33));
console.log(point(0x1F418));
JavaScript
복사
•
ES5의 fromCharCode()사용
◦
Surrogate pair로 작성
⇒ 0x1f418를 지원하지 않아 제대로 출력이 안됩니다.
console.log(String.fromCharCode(0x1f418));
console.log(String.fromCharCode(0xD83D, 0xDC18));
JavaScript
복사
codePointAt()
•
형태: String.prototype.codePointAt()
•
파라미터: 유니코드로 변환할 문자열의 인덱스
•
반환: 코드 포인트 값
대상 문자열에서
•
파라미터에 작성한 인덱스 번째 문자를 유니코드 코드포인트로 변환하여 반환합니다.
1.
const result = "가나다".codePointAt(2);
•
문자열 "가나다"에서 3번째의 코드포인트를 구해 반환합니다.
•
반환된 코드 포인트 타입은 number입니다.
2.
인덱스 번째에 문자가 없으면 undefined를 반환합니다.
3.
codePointAt(2)의 값은 45796이고 fromCodePoint(45796)의 값은 "다"입니다.
•
코드 포인트는 UTF-16으로 인코딩된 값
const result = "가나다".codePointAt(2);
console.log(result);//45796
console.log(typeof result);//number
console.log("가나다".codePointAt(3));//undefined
console.log(String.fromCodePoint(result));//다
JavaScript
복사
String.fromCodePoint(49,50)와 "123".codePointAt(1)의 형태가 다른데 그 이유는 무엇일까요?
normalize()
•
형태: String.prototype.normalize()
•
파라미터: 정규화 형식. 디폴트: NFC
•
반환: 변환된 문자열
•
대상 문자열을 파라미터에 지정한 유니코드 정규화 형식으로 변환및 반환하는 함수입니다.
⇒ ㄱ과 ㅏ 의 코드 포인트를 16진수로 구합니다.
⇒ ㄱ과 ㅏ의 코드 포인트를 연결하여 작성합니다.
⇒ "ㄱㅏ"로 표시되지만 제대로 연결이 되진 않았습니다.
⇒ NFC와 NFD는 단지 연결하여 어색하지만 NFKD와 NFKC는 모아 쓴형태로 표시됩니다.
console.log("ㄱ".codePointAt().toString(16));//3131
console.log("ㅏ".codePointAt().toString(16));//314f
console.log("\u{3131}\u{314F}");//ㄱㅏ
const point = "\u{3131}\u{314F}";
console.log(point.normalize("NFC"));//ㄱㅏ
console.log(point.normalize("NFD"));//ㄱㅏ
console.log(point.normalize("NFKD"));//가
console.log(point.normalize("NFKC"));//가
JavaScript
복사
•
3. 시작/끝복제: startsWith(), endsWith(), repeat(), includes(), raw()
startsWith()
•
형태: String.prototype.startsWith()
•
파라미터: 비교문자열, 비교 시작 인덱스(default: 0)
•
반환: 시작하면 true 아니면 false
•
대상 문자열이 첫 번째 파라미터의 문자열로 시작하면 true 아니면 false를 반환합니다.
•
정규 표현식 사용이 불가능합니다.
⇒"AB"로 시작하기에 true를 반환하고 "BC"는 있지만 시작점이 아니기에 false를 반환합니다.
const target = "ABC";
console.log(target.startsWith("AB"));//true
console.log(target.startsWith("BC"));//false
console.log(/^AB/.test(target));//true
JavaScript
복사
•
두 번째 파라미터는 Optional 하며 비교 시작 인덱스를 작성합니다.
⇒ BC는 중간에 있지만 시작 인덱스가 1이므로 true를 반환합니다.
const target = "ABC";
console.log(target.startsWith("BC", 1));//true
JavaScript
복사
endsWith()
•
형태: String.prototype.endsWith()
•
파라미터: 비교 문자열, 사용 문자열 길이(default: 전체)
•
반환: 끝나면 true, 아니면 false
•
대상 문자열이 첫 번째 파라미터의 문자열로 끝나면 true, 아니면 false를 반환합니다.
const target = "ABC";
console.log(target.endsWith("BC"));
console.log(target.endsWith("AB"));
console.log(/BC$/.test(target);
JavaScript
복사
•
두 번째파라미터는 선택이며 사용할 문자열 길이를 지정합니다.
const target = "ABC";
console.log(target.endsWith("AB", 2));//true
JavaScript
복사
repeat()
•
형태: String.prototype.repeat()
•
파라미터: 복제할 수(default: 0)
•
반환: 복제하여 만든 문자열
•
대상 문자열을 파라미터에 작성한 수만큼 복제,연결하여 반환합니다.
⇒ repeat(3): ABC를 3번 복제하고 연결하여 반환합니다.
⇒ 파라미터를 작성하지 않거나 0을 작성하면 빈 문자열을 반환합니다.
⇒ 2.7에서 0.7을 무시하고 2를 사용합니다.
const target = "ABC";
console.log(target.repeat(3));
console.log(target.repeat(0));
console.log(target.repeat());
console.log(target.repeat(2.7));
JavaScript
복사
includes()
•
형태: String.prototype.includes()
•
파라미터: 존재 여부 비교 문자열, 비교 시작 인덱스(default: 0)
•
반환: 존재하면 true, 아니면 false
•
대상 문자열에 첫 번째 파라미터의문자열이 있으면 true없으면 false를 반환.
•
첫 번째 파라미터가 숫자면 문자열로 변환하여 체크합니다.
•
두 번째 파라미터를 작성하면 비교 시작인덱스
const target = "123";
console.log(target.includes("1"));//true
console.log(target.includes(12));//true
console.log(target.includes("13"));//false
JavaScript
복사
const target = "ABC";
console.log(target.includes("A", 1));
try{
result = target.includes(/^A/);
} catch(e){
console.log("정규표현식 사용 불가");
}
JavaScript
복사
4. 길이 늘리기, 공백 삭제:padStart(), padEnd(), trimStart, trimEnd()
padStart()
•
형태: String.prototype.padStart()
•
파라미터: 늘릴 길이 값, 설정할 값(Optional)
•
반환: 길이를 늘리고 문자열을 채운 결과
•
첫 번째 파라미터 값만큼 길이를 늘리고
◦
늘어난 끝에 대상 문자열을 설정한 후
◦
앞의 남은 공간에 두 번째 파라미터를 채웁니다.
•
두 번째 파라미터에 채울 문자열 작성
1.
console.log("ABC".padStart(10, "123"));
•
"ABC"를 10자리로 늘린 뒤 마지막 8,9,10 번째에 "ABC"설정
이후 남은 자리를 "123"으로 차례대로 채웁니다.
2.
console.log("ABC".padStart(6, "123456"));
•
6자리 끝에 ABC를 설정후 남은 3자리에 왼쪽부터 차례대로 채웁니다.
3.
console.log("ABCDE".padStart(3, "123"));
•
전체 길이가 대상 문자열보다 작을경우 길이를 줄이지 않고 대상 문자열을 반환합니다.
4.
console.log("ABC".padStart(6).length);
•
두 번째 파라미터를 작성하지 않으면 남은 앞에 빈 문자열을 채웁니다.
console.log("ABC".padStart(10, "123"));//1231231ABC
console.log("ABC".padStart(6, "123456"));//123ABC
console.log("ABCDE".padStart(3, "123"));//ABCDE
console.log("ABC".padStart(6).length);//6
JavaScript
복사
padEnd()
•
형태: String.prototype.padEnd()
•
파라미터: 늘릴 길이 값, 설정할 값(Optional)
•
반환: 길이를 늘리고 문자열을 채운 결과
•
첫 번째 파라미터 값만큼 길이를 늘리고
◦
늘어난 앞에 대상 문자열을 설정한 후
◦
뒤의 남은 공간에 두 번쨰 파라미터를 채웁니다.
•
두 번째 파라미터에 채울 문자열 작성
1.
console.log("ABC".padEnd(10, "123"));
•
"ABC"를 10자리로 늘린 뒤 1,2,3 번째에 "ABC"설정
이후 남은 자리를 "123"으로 차례대로 채웁니다.
2.
console.log("ABC".padEnd(6, "123456"));
•
6자리 앞에 ABC를 설정후 남은 3자리에 왼쪽부터 차례대로 채웁니다.
3.
console.log("ABCDE".padEnd(3, "123"));
•
전체 길이가 대상 문자열보다 작을경우 길이를 줄이지 않고 대상 문자열을 반환합니다.
4.
console.log("ABC".padEnd(6).length);
•
두 번째 파라미터를 작성하지 않으면 남은 앞에 빈 문자열을 채웁니다.
console.log("ABC".padEnd(10, "123"));//ABC1231231
console.log("ABC".padEnd(6, "123456"));//ABC123
console.log("ABCDE".padEnd(3, "123"));//ABCDE
console.log("ABC".padEnd(6).length);//6
JavaScript
복사
trimStart()
•
형태: String.prototype.trimStart()
•
파라미터: 없음
•
반환: 삭제한 결과
•
문자열 앞의 공백 삭제
const value = " 123";
console.log(value.length);//5
console.log(trimStart().length);//3
const split = "a, b, c".split(",");
for(let value of split){
console.log(`${value}, $[value.length}`);
console.log(value.trimStart().length);
};
JavaScript
복사
trimEnd()
•
형태: String.prototype.trimEnd()
•
파라미터: 없음
•
반환: 삭제한 결과
•
문자열 끝의 공백 삭제
const value = "123 ";
console.log(value.length);//5
console.log(trimStart().length);//3
JavaScript
복사
