Jake Seo
제이크서 개발 블로그
Jake Seo
전체 방문자
오늘
어제
  • 분류 전체보기 (719)
    • AI 서비스 개발 일기 (3)
    • LLM 개발 일기 (1)
    • ------레거시 (2025.08.23 이전)--.. (0)
    • 백준 문제풀이 (1)
    • 릿코드 문제풀이 (2)
    • 알고리즘 이론 (10)
      • 기본 이론 (2)
      • 배열과 문자열 (8)
    • 데이터베이스 (15)
      • Planet Scale (1)
      • MSSQL (9)
      • 디비 기본 개념 (1)
      • SQLite 직접 만들어보기 (4)
    • 보안 (7)
    • 설계 (1)
    • 네트워크 (17)
      • HTTP (9)
      • OSI Layers (5)
    • 회고 (31)
      • 연간 회고 (2)
      • 주간 회고 (29)
    • 인프라 (52)
      • 도커 (12)
      • AWS (9)
      • 용어 (21)
      • 웹 성능 (1)
      • 대규모 서비스를 지탱하는 기술 (9)
    • 깃 (7)
    • 빌드 도구 (7)
      • 메이븐 (6)
      • 그레이들 (0)
    • Java (135)
      • 이펙티브 자바 (73)
      • 자바 API (4)
      • 자바 잡지식 (30)
      • 자바 디자인 패턴 (21)
      • 톰캣 (Tomcat) (7)
    • 프레임워크 (64)
      • next.js (14)
      • 스프링 프레임워크 (28)
      • 토비의 스프링 (6)
      • 스프링 부트 (3)
      • JPA (Java Persistence API) (5)
      • Nest.js (8)
    • 프론트엔드 (48)
      • 다크모드 (1)
      • 노드 패키지 관리 매니저 (3)
      • CSS (19)
      • Web API (11)
      • tailwind-css (1)
      • React (5)
      • React 새 공식문서 요약 (1)
      • HTML (Markup Language) (5)
    • 자바스크립트 (108)
      • 모던 자바스크립트 (31)
      • 개념 (31)
      • 정규표현식 (5)
      • 코드 스니펫 (1)
      • 라이브러리 (6)
      • 인터뷰 (24)
      • 웹개발자를 위한 자바스크립트의 모든 것 (6)
      • 팁 (2)
    • Typescript (49)
    • 리눅스와 유닉스 (10)
    • Computer Science (1)
      • Compiler (1)
    • IDE (3)
      • VSCODE (1)
      • IntelliJ (2)
    • 세미나 & 컨퍼런스 (1)
    • 용어 (개발용어) (16)
      • 함수형 프로그래밍 용어들 (1)
    • ORM (2)
      • Prisma (2)
    • NODEJS (2)
    • cypress (1)
    • 리액트 네이티브 (React Native) (31)
    • 러스트 (Rust) (15)
    • 코틀린 (Kotlin) (4)
      • 자바에서 코틀린으로 (4)
    • 정규표현식 (3)
    • 구글 애널리틱스 (GA) (1)
    • SEO (2)
    • UML (2)
    • 맛탐험 (2)
    • 리팩토링 (1)
    • 서평 (2)
    • 소프트웨어 공학 (18)
      • 테스팅 (16)
      • 개발 프로세스 (1)
    • 교육학 (1)
    • 삶의 지혜, 통찰 (1)
    • Chat GPT (2)
    • 쉘스크립트 (1)
    • 컴파일 (2)
    • Dart (12)
    • 코드팩토리의 플러터 프로그래밍 (4)
    • 플러터 (17)
    • 안드로이드 스튜디오 (1)
    • 윈도우즈 (1)
    • 잡다한 백엔드 지식 (1)
    • 디자인 패턴 (1)

블로그 메뉴

  • 홈
  • 태그
  • 방명록

공지사항

인기 글

태그

  • 자바스크립트 인터뷰
  • 메이븐 골
  • NEXT JS
  • 도커공식문서
  • 싱글톤 패턴
  • 빈 검증
  • 스프링 검증
  • serverless computing
  • 외래키 제약조건
  • prerendering
  • item7
  • 슬로우 쿼리
  • Pre-rendering
  • 싱글톤
  • Javadoc 자바독 자바주석 주석 Comment
  • 이펙티브자바
  • 자바스크립트
  • item8
  • pnpm
  • 이펙티브 자바
  • 메이븐 라이프사이클
  • bean Validation
  • MSSQL
  • 참조 해제
  • 이펙티브 자바 item9
  • 토비의 스프링
  • try-with-resources
  • 싱글턴
  • 자료구조
  • 객체복사
  • 자바스크립트 면접
  • 느린 쿼리
  • 러스트
  • 팩터리 메서드 패턴
  • 디자인패턴
  • Next.js
  • rust
  • 프로그래머의 뇌
  • 서버리스 컴퓨팅
  • 알고리즘
  • 플라이웨이트패턴
  • item9
  • Java
  • 자바 검증
  • 메이븐 페이즈
  • 자바 디자인패턴
  • 자바
  • 추상 팩터리 패턴
  • next js app
  • 작업기억공간

최근 댓글

최근 글

티스토리

hELLO · Designed By 정상우.
Jake Seo

제이크서 개발 블로그

자바스크립트/모던 자바스크립트

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

2023. 3. 12. 02:45

새로운 문자열 함수 추가

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

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
저작자표시 비영리 (새창열림)

'자바스크립트 > 모던 자바스크립트' 카테고리의 다른 글

모던 자바스크립트, ES2019 의 stable 내장 정렬 (Array.prototype.sort)  (0) 2023.03.15
모던 자바스크립트, 편의 유틸 배열 메서드  (0) 2023.03.13
모던 자바스크립트, UTF-16 이슈 해결에 관련된 문자열 함수  (0) 2023.03.11
모던 자바스크립트, 템플릿 리터럴과 템플릿 태그 함수  (0) 2023.03.08
모던 자바스크립트, 비동기 버전의 이터레이터, 이터러블, 제너레이터  (0) 2023.02.28
    '자바스크립트/모던 자바스크립트' 카테고리의 다른 글
    • 모던 자바스크립트, ES2019 의 stable 내장 정렬 (Array.prototype.sort)
    • 모던 자바스크립트, 편의 유틸 배열 메서드
    • 모던 자바스크립트, UTF-16 이슈 해결에 관련된 문자열 함수
    • 모던 자바스크립트, 템플릿 리터럴과 템플릿 태그 함수
    Jake Seo
    Jake Seo
    ✔ 댓글로 틀린 부분을 지적해주시면 기분 나빠하지 않고 수정합니다. ✔ 많은 퇴고를 거친 글이 좋은 글이 된다고 생각합니다. ✔ 간결하고 명료하게 사람들을 이해 시키는 것을 목표로 합니다.

    티스토리툴바