자바스크립트 이스케이프 문자와 템플릿 문자열 사용법과 예제
자바스크립트에서 이스케이프 문자는 문자열 내에서 특수문자를 문자열 그대로 표시할 수 있게 해주는 방법입니다. 이스케이프 문자는 역슬래시()를 사용하면 문자열 내에 따옴표, 역슬래시, 줄 바꿈 등과 같은 문자를 문자열 그대로 사용할 수 있습니다. 그리고 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} 입니다.`);
자바스크립트 기초 이전 게시물
- 자바스크립트 HTML 추가 및 작성 위치 (async, defer)
- 자바스크립트 변수와 상수: var, let, const 차이점과 사용법
- 자바스크립트 자료형 종류 및 사용 예시
- 자바스크립트 연산자 종류: 산술, 대입, 비교, 논리, 삼항 및 예시
- 자바스크립트 형 변환(int, string 등) 방법 및 사용 예제
- 자바스크립트 조건문: if, switch, 삼항 연산자 사용법과 예제 코드
- 자바스크립트 반복문: for, while, do-while등 사용법과 예제
- 자바스크립트 함수: 선언, 매개변수, 반환값, 스코프, 호이스팅
이 글이 도움이 되셨다면 공유를 부탁 드립니다. 다음 글에서 뵙겠습니다!