ES6(ECMAScript 2015) – 템플릿 리터럴 – 0 – 문자열 내삽

ES6(ECMAScript 2015) – 템플릿 리터럴 – 0 – 문자열 내삽

템플릿 리터럴: 새로운 문자열 표기법

소제목: 템플릿 리터럴이란 무엇인가요?

템플릿 리터럴은 ES6(ECMAScript 2015)에서 도입된 새로운 문자열 표기법입니다. 이전에는 문자열을 생성할 때 작은따옴표나 큰따옴표를 사용했지만, 템플릿 리터럴은 백틱(`)을 사용하여 문자열을 감싸는 방식입니다. 이를 통해 문자열 내에 변수, 표현식, 줄바꿈 등을 간편하게 포함시킬 수 있습니다.

예시: 템플릿 리터럴을 사용한 문자열 생성

const name = 'Alice';
const age = 25;

// 이전 방식
const message = '제 이름은 ' + name + '이고, 나이는 ' + age + '세입니다.';
console.log(message); // 제 이름은 Alice이고, 나이는 25세입니다.

// 템플릿 리터럴을 사용한 방식
const message = `제 이름은 ${name}이고, 나이는 ${age}세입니다.`;
console.log(message); // 제 이름은 Alice이고, 나이는 25세입니다.

0: 문자열 내삽

소제목: 문자열 내삽이란 무엇인가요?

문자열 내삽은 템플릿 리터럴을 사용하여 변수, 표현식을 문자열 안에 삽입하는 것을 의미합니다. 내삽하고자 하는 변수 또는 표현식을 ${}로 감싸주면 됩니다. 이를 통해 변수나 표현식의 값을 동적으로 문자열에 포함시킬 수 있습니다.

예시: 문자열 내삽 사용하기

const name = 'Bob';
const age = 30;

const message = `제 이름은 ${name}이고, ${age}세입니다.`;
console.log(message); // 제 이름은 Bob이고, 30세입니다.

위의 예시에서는 변수 name과 age를 문자열 내에 ${}로 감싸주어 내삽했습니다. 실행 결과로는 “제 이름은 Bob이고, 30세입니다.”라는 문자열이 출력됩니다.

예시: 표현식 내삽하기

템플릿 리터럴을 사용하면 변수 뿐만 아니라 표현식도 내삽할 수 있습니다. 다음은 표현식 내삽의 예시입니다.

const x = 10;
const y = 5;

const result = `x + y는 ${x + y}입니다.`;
console.log(result); // x + y는 15입니다.

위의 예시에서는 ${x + y}를 사용하여 x + y의 결과를 문자열에 포함시켰습니다. 따라서 실행 결과로는 “x + y는 15입니다.”라는 문자열이 출력됩니다.

주의해야 할 점

1. 템플릿 리터럴은 백틱(`)으로 감싸야 합니다. 따옴표나 쌍따옴표를 사용하면 템플릿 리터럴이 아닌 일반적인 문자열로 처리됩니다.
2. 템플릿 리터럴 내에서는 줄바꿈도 유지됩니다. 따라서 별도의 이스케이프 문자를 사용하지 않아도 자연스럽게 줄바꿈을 표현할 수 있습니다.
3. 내삽할 변수나 표현식은 ${}로 감싸주어야 합니다. ${} 내부에서는 변수나 표현식을 사용할 수 있습니다.
4. 템플릿 리터럴은 문자열을 조립하는 간편한 방법이지만, 코드 가독성을 유지하기 위해 적절한 사용을 권장합니다. 너무 복잡한 표현식이나 긴 문자열을 사용할 경우 가독성이 저하될 수 있습니다.

자바스크립트의 ES6에서 도입된 템플릿 리터럴과 문자열 내삽에 대해 알아보았습니다. 템플릿 리터럴은 백틱()을 사용하여 문자열을 감싸고, 내삽할 변수나 표현식은${}`로 감싸주면 됩니다. 이를 통해 변수와 표현식을 동적으로 문자열에 삽입할 수 있습니다. 주의해야 할 점은 템플릿 리터럴을 올바르게 사용하고, 코드 가독성을 고려하는 것입니다. ES6의 템플릿 리터럴은 자바스크립트 개발을 더욱 편리하고 효율적으로 만들어주는 기능입니다.