자바스크립트 이스케이프 문자와 템플릿 문자열 사용법과 예제

자바스크립트 이스케이프 문자와 템플릿 문자열 사용법과 예제

자바스크립트에서 이스케이프 문자는 문자열 내에서 특수문자를 문자열 그대로 표시할 수 있게 해주는 방법입니다. 이스케이프 문자는 역슬래시()를 사용하면 문자열 내에 따옴표, 역슬래시, 줄 바꿈 등과 같은 문자를 문자열 그대로 사용할 수 있습니다. 그리고 ES6에서 추가된 템플릿 문자열은 문자열 내에서 변수나 표현식을 삽입하여 문자열을 생성하는 데 아주 유용합니다.

그럼 자주 사용하는 이스케이프 문자를 표시하는 방법과 템플릿 문자열을 사용하는 방법에 대해서 알아보겠습니다.

이스케이프 문자

1. 이스케이프 문자 사용 시

▼ 자주 사용하는 이스케이프 문자

이스케이프 문자설명
\’작은따옴표
\”큰따옴표
\\역슬래시
\n줄바꿈
\t


2. 사용 예제

▼ 예제 코드

let str1 = '작은 따움표' 이스케이프 문자 예제';
console.log(str1);

let str2 = "큰 따옴표" 이스케이프 문자 예제";
console.log(str2);

let str3 = '역슬래시 이스케이프 문자 예제';
console.log(str3);

let str4 = '줄바꿈n 이스케이프 문자 예제';
console.log(str4);

let str5 = '탭t 이스케이프 문자 예제';
console.log(str5);


▼ 실행 화면

이스케이프 문자 사용 예제 코드 실행 화면입니다.

템플릿 문자열

ES6에서 추가된 템플릿 문자열은 문자열 내에서 변수나 표현식을 삽입하여 문자열을 생성하는 데 유용합니다. 작은따옴표나 큰 따옴표에 영향을 받지 않고 줄 바꿈도 자유롭게 사용할 수 있습니다. 또한, “${}”을 사용하여 문자열에 변수를 쉽게 삽입할 수 있습니다.


1. 작은따옴표나 큰 따옴표에 영향을 받지 않습니다.

▼ 예제 코드

// 이스케이프 문자 사용
let str1 = "작은 따움표', 큰 따옴표" 이스케이프 문자 예제"
console.log(str1);   // 작은 따움표', 큰 따옴표" 이스케이프 문자 예제

// 템플릿 문자열 사용
let str2 = `작은 따움표', 큰 따옴표" 템플릿 문자열 예제`
console.log(str2);   // 작은 따움표', 큰 따옴표" 템플릿 문자열 예제


2. 줄 바꿈을 자유롭게 사용할 수 있습니다.

☞ 이전에는 문자열을 생성하기 위해 문자열 연결 연산자(+)를 사용해야 했습니다.

▼ 예제 코드

// 문자열 연결 연산자(+) 사용
let str1;
str1 =        "안녕하세요.n"
str1 = str1 + "BlueShare 블로그 입니다.n"
str1 = str1 + "방문해 주셔서 감사합니다."
console.log(str1);


// 템플릿 문자열 사용
let str2;
str2 = `안녕하세요.
BlueShare 블로그 입니다.
방문해 주셔서 감사합니다.`
console.log(str2);


3. “${}”을 사용하여 문자열에 변수를 쉽게 삽입할 수 있습니다.

▼ 예제 코드

let num1 = 3;
let num2 = 5;

console.log("[곱셈] " + num1 + " * " + num2 + " = " + num1 * num2 + " 입니다.");

// 템플릿 문자열 사용
console.log(`[곱셈] ${num1} * ${num2} = ${ num1 * num2} 입니다.`);

자바스크립트 기초 이전 게시물

  1. 자바스크립트 HTML 추가 및 작성 위치 (async, defer)
  2. 자바스크립트 변수와 상수: var, let, const 차이점과 사용법
  3. 자바스크립트 자료형 종류 및 사용 예시
  4. 자바스크립트 연산자 종류: 산술, 대입, 비교, 논리, 삼항 및 예시
  5. 자바스크립트 형 변환(int, string 등) 방법 및 사용 예제
  6. 자바스크립트 조건문: if, switch, 삼항 연산자 사용법과 예제 코드
  7. 자바스크립트 반복문: for, while, do-while등 사용법과 예제
  8. 자바스크립트 함수: 선언, 매개변수, 반환값, 스코프, 호이스팅
위로 스크롤