[자바스크립트 ES6+ 기본] 11.String 오브젝트

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진수 이스케이프 시퀀스라고 부름

const escape = "\x31\x32\x33";
log(escape);
log("\\");

// 123
// \

• Unicode Escape Sequence
  • 이스케이프를 시퀀스를 유니코드로 작성한 형태

const escape = "\x31\x32\x33";
log(escape);
const unicode = "\u0034\u0035\u0036";
log(unicode);

// 123
// 456

• UES 값 범위
  • UTF-16 진수로 U+0000에서 U+FFFF까지 사용 가능

• ES5 문제
  • U+FFFF보다 큰 코드 포인트는 어떻게 작성할 것인가?
• 유니코드 코드 포인트 이스케이프
  • 코드 포인트 값에 관계없이 사용할 수 있는 형태 필요
  • \u{31}, \u{1f418} 형태

const unicode = "\u0031\u0032\u0033";
log(unicode);
const es6 = "\u{34}\u{35}\u{36}";
log(es6);
// 코끼리 이미지
log("\u{1f418}");

// 123
// 456
// 🐘

---

ES5 호환성

• Surrogate pair
  • \u{1f418} 형태를 ES5에서 사용 불가
  • ES5에서는 두 개의 유니코드 이스케이프 시퀀스 사용
  • 이를 Surrogate pair라고 함

const pair = "\uD83D\uDC18";
log(pair);

// 🐘

• Surrogate pair 계산 방법

  • 스펙의 계산 방법

• 유니코드 사용의 참조 사항

  • 브라우저, 스마트폰에 따라 표시되는 문자 모습이 다름
  • https://unicode-table.com

---

Unicode 함수

fromCodePoint()

• 유니코드의 코드 포인트에 해당하는 문자 반환
• 파라미터에 다수의 코드 포인트 작성 가능
  • 문자를 연결하여 반환

const point = String.fromCodePoint;
log(point(49, 50, 51));
log(point(44032, 44033));

log(point(0x31, 0x32, 0x33));
log(point(0x1F418));

// 123
// 가각
// 123
// 🐘

• ES5의 fromCharCode() 사용
  • Surrogate pair로 작성

log(String.fromCharCode(0x1f418));
log(String.fromCharCode(0xD83D, 0xDC18));

// 
// 🐘

codePointAt()

• 대상 문자열에서
  • 파라미터에 작성한 인덱스 번째 문자를 유니코드 코드 포인트로 변환하여 반환
  • 코드 포인트는 UTF-16으로 인코딩된 값

const result = "가나다".codePointAt(2);
log(result);
log(typeof result);

log("가나다".<codePointAt(3));
log(String.fromCodePoint(result));

// 45796
// number
// undefined
// 다

---

String.fromCodePoint(49, 50)와 "123".codePointAt(1)은 형태가 다름 => 형태를 다르게 한 것은 무엇 때문일까?

• String.fromCodePoint(49, 50)

  • 직접 호출하는 함수 형태
  • 파라미터에 다수 작성

• "123".codePointAt(1)

  • String.prototype.codePointAt() 호출
  • prototype을 사용한 메소드 형태
  • 파라미터에 인덱스 하나만 작성

• [1, 2, 3]으로 작성하면 어떻게 될까

  • codePointAt()은 값을 구하는 대상이 있지만 fromCodePoint()는 대상이 없음

---

normalize()

• 대상 문자열을 파라미터에 지정한
  • 유니코드 정규화 형식으로 변환하여 반환

log("ㄱ".codePointAt().toString(16));
log("ㅏ".codePointAt().toString(16));
log("\u{3131}\u{314F}");

// 3131
// 314f
// ㄱㅏ

const point = "\u{3131}\u{314F}";
log(point.normalize("NFC"));
log(point.normalize("NFD"));

log(point.normalize("NFKD"));
log(point.normalize("NFKC"));

// ㄱㅏ
// ㄱㅏ
// 가
// 가

• 유니코드 정규화 형식
  • NFC, NFD, NFKC, NFKD
  • http://www.unicode.org/reports/tr15/

---

시작/끝 체크 복제

startsWith()

• 대상 문자열이
  • 첫 번째 파라미터의 문자열로 시작하면 true, 아니면 false 반환
  • 정규 표현식 사용 불가

const target = "ABC";
log(target.startsWith("AB"));
log(target.startsWith("BC"));

log(/^AB/.test(target));

// true
// false
// true

• 두 번째 파라미터
  • 선택이며, 비교 시작 인덱스 작성

const target = "ABCD";
log(target.startsWith("BC", 1));
log(target.startsWith("BC", 2));

// true
// false

endsWith()

• 대상 문자열이
  • 첫 번째 파라미터의 문자열로 끝나면 true, 아니면 false 반환

const target = "ABC";
log(target.endsWith("BC"));
log(target.endsWith("AB"));

log(/BC$/.test(target));

// true
// false
// true

• 두 번째 파라미터
  • 선택이며, 사용할 문자열 길이 지정

const target = "ABC";
log(target.endsWith("AB", 2));

// true

repeat()

• 대상 문자열을
  • 파라미터에 작성한 수만큼 복제, 연결하여 반환

const target = "ABC";
log(target.repeat(3));
log(target.repeat(0));
log(target.repeat());
log(target.repeat(2.7)); // 0.7 무시하고 2 사용

// ABCABCABC
// ""
// ""
// ABCABC

includes()

• 대상 문자열에
  • 첫 번째 파라미터의 문자열이 있으면 true 없으면 false 반환

const target = "123";
log(target.includes("1"));

log(target.includes(12));
log(target.includes("13"));

// true
// true
// false

• 첫 번째 파라미터

  • 숫자이면 문자열로 변환하여 체크

• 두 번째 파라미터(선택)

  • 비교 시작 인덱스 작성

const target = "ABC";
log(target.includes("A", 1));

try {
  result = target.includes(\^A\);
} catch (e) {
    log("정규 표현식 사용 불가");
};

// false
// 정규 표현식 사용 불가

raw()

• Template의 이해가 필요하므로 Template에서 같이 다룹니다.

---

길이 늘리기, 공백 삭제

padStart()

• 첫 번째 파라미터 값만큼 길이를 늘리고

  • 늘어난 끝에 대상 문자열을 설정한 후
  • 앞의 남은 공간에 두 번째 파라미터를 채움

• 두 번째 파라미터에 채울 문자열 작성

log("ABC".padStart(10, "123"));
log("ABC".padStart(6, "123456"));
log("ABCDE".padStart(3, "123"));
log("ABC".padStart(6).length);

// 1231231ABC
// 123ABC
// ABCDE
// 6

padEnd()

• 첫 번째 파라미터 값만큼 길이를 늘리고

  • 늘어난 앞에 대상 문자열을 설정한 후
  • 뒤의 남은 공간에 두 번째 파라미터를 채움

• 두 번째 파라미터에 채울 문자열 작성

log("ABC".padEnd(10, "123"));
log("ABC".padEnd(6, "123456"));
log("ABCDE".padEnd(3, "123"));
log("ABC".padEnd(6).length);

// ABC1231231
// ABC123
// ABCDE
// 6

trimStart()

• 문자열 앞의 공백 삭제

const value = "  123";
log(value.length);
log(value.trimStart().length);

const split = "a, b, c".split(",");

for (let value of split){
  log(`${value}, ${value.length}`);
  log(value.trimStart()length);
};

// 5
// 3
// a, 1
// 1
// b, 2
// 1
// c, 2
// 1

trimEnd()

• 문자열 끝의 공백 삭제

const value = "123  ";
log(value.length);
log(value.trimEnd().length);

// 5
// 3