자바스크립트 - String 표현 시 " (큰 따옴표), ' (작은 따옴표), ` (억음 부호) 공통점 & 차이점

셋 부호의 공통점 1

console.log("hello world"); // hello world
console.log('hello world'); // hello world
console.log(`hello world`); // hello world

큰따옴표("), 작은따옴표('), 억음 부호(`) 셋 다 String 표현이 가능하다.

 

 

셋 부호의 공통점 2

console.log("'hello' `world`"); // 'hello' `world`
console.log('"hello" `world`'); // "hello" `world`
console.log(`"hello" 'world'`); // "hello" 'world'

String 표현 시, 표현한 부호 문자 외 다른 부호 문자 사용 가능하다.

예: String이 "hello world"일 시, 작은따옴표(')와 억음 부호(`)는 자유자재로 사용 가능하다.

 

 

셋 부호의 공통점 3

console.log("hello" world"); // Uncaught SyntaxError: missing ) after argument list
console.log('hello' world'); // Uncaught SyntaxError: missing ) after argument list
console.log(`hello` world`); // Uncaught SyntaxError: missing ) after argument list

String 표현 시, 표현한 부호 문자를 String 속에 바로 쓸 수 없다.

 

 

console.log("hello\" world"); // hello" world
console.log('hello\' world'); // hello' world
console.log(`hello\` world`); // hello` world

만약 큰따옴표(")로 표현한 "hello world" 속에 "hello" world"라고 표현하고 싶으면, 역슬래시 (\) 문자를 부호 앞에 넣어서 사용할 수 있다.

 

 

큰따옴표(") & 작은따옴표(')의 공통점

큰따옴표(")와 작은따옴표(')의 차이는 없다, 다만 두 따옴표를 번갈아 쓰면 코드가 우왕좌왕하므로, 한 따옴표를 정해서 쭉 쓰는 걸 추천.

 

 

억음 부호(`)의 차이점

억음 부호(`)가 다른 부호에 비해 다른 점은 바로 template literal 사용이 가능하다, 뭔 말이냐면 String 안에 변수가 들어갈 수 있다.

사용법: `${변수 이름}`

const name = 'John';
console.log("Hello " + name); // Hello John
console.log('Hello ' + name); // Hello John
console.log(`Hello ${name}`); // Hello John

큰따옴표(")와 작은따옴표(')는 + 문자를 사용해 변수와 String을 합쳐야 하지만, 억음 부호(`)는 변수를 String과 쉽게 합칠 수 있어 코드가 간결해진다.