자바스크립트에서 작은따옴표와 백틱의 차이

자바스크립트에서 작은따옴표와 백틱의 차이

JavaScript에서 백틱(`)과 작은따옴표(')의 차이점에 대해 알아봅니다. 비슷하지만 코딩 결과는 아래와 같이 큰 차이가 있습니다. 아래 코딩의 10째줄의 기호가 위는 작은따옴표, 아래는 백틱입니다.

작은따옴표를 사용한 결과 에러

백틱을 사용한 결과 장상 출력

작은따옴표(')와 큰따옴표(")

작은따옴표(')와 큰따옴표(")는 문자열을 정의하는 데 사용됩니다. 이 둘은 기능적으로 동일하며, 주로 코드 스타일이나 가독성 때문에 하나를 선택해서 사용합니다. 예를 들어:

let singleQuote = 'Hello, World!';
let doubleQuote = "Hello, World!";

백틱(`)

백틱(`)은 ES6(ECMAScript 2015)에서 도입된 템플릿 리터럴을 정의하는 데 사용됩니다. 템플릿 리터럴은 여러 가지 유용한 기능을 제공하는데, 대표적으로 다음과 같습니다.

 

- 문자열 내 변수 삽입 (String Interpolation):

 let name = 'Alice';
 let greeting = `Hello, ${name}!`;
 console.log(greeting); // 출력: Hello, Alice!

백틱을 사용하면 ${}를 이용해 문자열 안에 변수를 삽입할 수 있습니다.

 

- 여러 줄 문자열 (Multi-line Strings):

 let multiLineString = `This is a string
 that spans across
 multiple lines.`;
 console.log(multiLineString);

백틱을 사용하면 여러 줄에 걸친 문자열을 쉽게 정의할 수 있습니다.

 

- 표현식 삽입 (Expression Interpolation):

 let a = 5;
 let b = 10;
 console.log(`The sum of a and b is ${a + b}`); // 출력: The sum of a and b is 15

템플릿 리터럴 안에서 표현식을 삽입할 수 있습니다.

 

정리

작은따옴표(`'`)와 큰따옴표(`"`)는 문자열을 정의하는 데 사용되며 기능적으로 동일합니다. 백틱(`` ` ``)은 템플릿 리터럴을 정의하며, 문자열 내 변수 삽입, 여러 줄 문자열, 표현식 삽입 등 다양한 기능을 제공합니다. 예를 들어, `${name}`을 사용해 문자열에 변수를 쉽게 삽입할 수 있고, 여러 줄에 걸친 문자열도 쉽게 작성할 수 있습니다. 백틱은 ES6에서 도입되어 코드 가독성을 높이는 데 유용합니다.