모던 자바스크립트, 편의 유틸 문자열 메서드

새로운 문자열 함수 추가

• 모던 자바스크립트에 들어서며 유용한 문자열 함수가 많이 생겼다.
• 잘 알아두면 코드의 양과 질에 큰 기여를 할만큼 좋은 것들이 많다.

String.raw()

console.log("안녕\n\n하세요");
/*
출력결과:
안녕

하세요
*/
console.log(String.raw`안녕\n\n하세요`);
/*
출력결과:
안녕\n\n하세요
*/

• 이스케이프 시퀀스를 그대로 출력하고 싶을 때 사용할 수 있다.

실무 예제: 파일 경로 표현하기

console.log(String.raw`C:\Users\jakeSeo\files\my_excel.xlsx`);
/*
출력결과:
C:\Users\jakeSeo\files\my_excel.xlsx
*/

• 보통 윈도우즈의 경로를 표현할 때 \ 가 Escape Character 로 인식되어 두번씩 적어야 하는데, 그러한 수고를 덜어낼 수 있다.

다른 예로는 역시나 Escape Character 가 방해되는 정규 표현식을 문자열로 표현할 때 사용할 수 있다.

String.prototype.repeat()

• 문자열을 반복한 결과의 문자열을 반환한다.
• 0 이나 NaN 을 전달하면 빈 문자열이 반환된다.
• 0 보다 작은 값 혹은 무한대를 전달하면 오류가 발생한다.

console.log("APPLE".repeat(10)); // APPLEAPPLEAPPLEAPPLEAPPLEAPPLEAPPLEAPPLEAPPLEAPPLE

String.prototype.startsWith(), String.prototype.endsWith()

• 문자열이 해당 패턴으로 끝나는지 혹은 시작하는지에 대한 결과를 반환한다.
• 두개의 인자를 받는데, 두번째 인자는 검증 범위와 관련이 있다.
  • startsWith(str, n): n 번째 인덱스부터 시작할 수 있다.
  • endsWith(str, n): n번째 인덱스에서 끝나도록 할 수 있다.

const apple = "APPLE";
console.log(apple.startsWith("AP")); // true
console.log(apple.endsWith("AP")); // false
console.log(apple.startsWith("LE")); // false
console.log(apple.endsWith("LE")); // true

const apple = "APPLE";
console.log(apple.startsWith("PP")); // false
console.log(apple.startsWith("PP", 1)); // true, 1번 인덱스부터 시작
console.log(apple.endsWith("AP")); // false
console.log(apple.endsWith("AP", 2)); // true, 2번 인덱스가 끝

String.prototype.includes()

• 전체 문자열에 해당 부분이 포함되었는지를 반환한다.

const test = "test";

console.log(test.includes("e")); // true
console.log(test.includes("f")); // false

String.prototype.padStart(), String.prototype.padEnd()

• 시작 또는 끝 부분에 패딩을 추가할 수 있다.
• 두번째 인자로 아무것도 주지 않으면, 공백으로 채우고, 문자열을 따로 주면 해당 문자열로 채운다.
• ES2017 에서 생겼다.

네이밍이 padLeft 와 padRight 이 되지 않은 이유는 오른쪽부터 쓰는 문자 (아랍어) 가 있기 때문이다.

console.log("Jake Seo".padStart(20));
console.log("Jin Kyu Seo".padStart(20));
/*
출력결과:
            Jake Seo
         Jin Kyu Seo
*/

• 패딩 덕에 앞에 공백이 동일하게 문자를 출력할 수 있다.

const datePad = (number) => number.toString().padStart(2, "0");

const birthDay = (year, month, day) =>
  `${year}-${datePad(month)}-${datePad(day)}`;

console.log(birthDay(1993, 7, 11)); // 1993-07-11
console.log(birthDay(1998, 1, 1)); // 1998-01-01

• 날짜를 표현할 때 글자 수를 균일하게 표현하는 예제이다.

String.prototype.trimStart(), String.prototype.trimEnd()

• 문자열 시작과 끝의 공백을 없애준다.
• ES2019 에서 생겼다.

const s = "     test     ";
console.log(s.trimStart()); //
console.log(s.trimEnd()); //
/*
출력결과:
test     
      test
*/

match, split, search, replace 메서드 업데이트

• 각각의 메서드를 위한 심볼이 생겼다.
  • Symbol.match
  • Symbol.split
  • Symbol.search
  • Symbol.replace
• 심볼을 통해 구현의 내용을 바꿀 수 있다.

Symbol.split 예제

const commaSeparatedNames = "John, Jane,    Mary ,   Peter,  Tom   ";
const trimSplitter = {
  [Symbol.split](str) {
    return str.split(",").map((name) => name.trim());
  },
};
const namesArray = commaSeparatedNames.split(trimSplitter);
console.log(namesArray); // Output: ['John', 'Jane', 'Mary', 'Peter', 'Tom']

• 위는 Symbol.split 을 통해 trim 함수가 포함된 split 메서드를 구현한 예제이다.
• trimSplitter 객체 내부에 있는 [Symbol.split](str) 메서드가 split 의 동작을 재구성한다.

Symbol.replace 예제

class TokenReplacer {
  constructor(rexTokenMatcher = /\{\{([^}]+)\}\}/g) {
    this.rexTokenMatcher = rexTokenMatcher;
  }

  [Symbol.replace](str, replaceValue) {
    str = String(str);

    return str.replace(
      this.rexTokenMatcher,
      (_, token) => replaceValue[token] || ""
    );
  }
}

const introduce = "Hello, my name is {{name}} and I'm {{age}}";
const replaced = introduce.replace(new TokenReplacer(), {
  name: "jake",
  age: 20,
});

console.log(replaced); // Hello, my name is jake and I'm 20