[JavaScript] String 다루는 방법 한 번에 정리 : String 선언하기, 템플릿 리터럴 사용해 String 사이에 변수 추가하기, 줄바꾸기

JavaScript의 String 선언

다른 언어들에서 일관된 String 선언 방법을 제공하는 것과는 달리 JavaScript에서 String을 선언하는 방법은 다양하다. JavaScript에서 String을 선언하는 방법은 세가지이다.

 

• '[문자열]' 으로 선언 
• "[문자열]' 으로 선언
• `[문자열]` 으로 선언

 

아래와 같이 어떤 방식으로든 선언이 가능하다.

const string1 = 'abc'
const string2 = "abc"
const string3 = `abc`

 

하지만 위 세가지 방식은 모두 다르게 활용될 수 있다. 아래의 예제를 통해 JavaScript에서 왜 이 세가지를 모두 선언할 수 있도록 만들었는지 이해하도록 하자.

 

String 내부에 "" 혹은 '' 포함하기

다음과 같은 단어를 문자열로 만든다고 해보자. He said "You are Awesome"

 

이를 아까와 같이 선언하려면 아래와 같이 선언해야 한다.

const introduceMe1 = 'I'm Dev Cho'
const introduceMe2 = "I'm Dev Cho"
const introduceMe3 = `I'm Dev Cho`

 

하지만 이렇게 코드를 짜보면 코드에 문제가 생기는 것을 확인할 수 있다.

 

 

이유는 바로 '[문자열]' 내부에는 ' 가 포함될 수 없기 때문이다. '가 포함되면 해당 부분까지만 문자열로 인식된다. 따라서 문자열 내부에 '가 포함될 때는 "" 혹은 ``을 쓰면 된다. 반대로 문자열 내부에 "가 포함되어야 할 때는 '나 `를 사용하면 된다.

 

하지만 항상 이런식으로 해결될 수는 없다 문자열에 `, ', " 셋 모두가 포함되면 어떻게 할 것인가? 그때는 바로 escape 문자 \ 를 사용하면 된다. 

 

escape 문자 \ 활용해 문자 escape 시키기

만약 ' 내부에 무조건 '가 포함되어야 한다고 하면 \` 와 같이 써서 문제를 해결할 수 있다.

const introduceMe1 = 'I\'m Dev Cho'

 

 

템플릿 리터럴 사용하기

JavaScript에서도 Kotlin과 마찬가지로 ``와 템플릿 리터럴(${})을 사용해 변수를 문자열 내부로 가지고 들어올 수 있다. 

 

const name = "Dev Cho"

const introduceMe = `I'm ${name}`

 

위 코드를 실행하면 아래와 같은 결과가 나온다.

 

 

하지만 문제는 JavaScript는 "", '' 에는 템플릿 리터럴을 지원하지 않는다. 따라서 템플릿 리터럴을 사용하려면 무조건 `` 을 사용해야 한다.

 

"[문자열]"와 '[문자열]'는 템플릿 리터럴을 사용할 수 없다.

예를 들어 "[문자열]"와 템플릿 리터럴을 함께 사용하는 아래 코드를 수행해보자.

const name = "Dev Cho"

const introduceMe = "I'm ${name}"

console.log(introduceMe)

 

결과는 다음과 같다. name 변수가 문자열에 삽입되지 않는다.

 

 

String 줄 바꾸기

줄을 바꾸기 위해서는 두가지 방법이 있다. 바로 ``을 사용하는 방법과 \n을 사용하는 방법이다. 이 둘을 알아보도록 하자.

 

`[문자열]` 사용해 줄 바꾸기

`[문자열]`을 사용하면 내부에서 줄을 바꾸기 위해 우리가 보통 작성하던 대로 엔터를 치면 된다.

 

예를 들어 아래 코드를 수행해보도록 하자.

const introduceMe =
    `
    I'm Dev Cho
    Nice to meet you
    `

console.log(introduceMe)

 

그러면 다음과 같은 결과가 나온다. 줄 바뀜이 모두 처리되는 것을 확인할 수 있다.

 

 

\n 사용해 줄 바꾸기

Javascript는 다른 언어들과 마찬가지로 \를 escape 문자로 사용한다. escape 문자 다음에 온 값에 따라 특정 동작이 수행되는데 n은 바로 줄바꿈을 수행하는 값이다.

 

다음의 코드를 수행해보자. 중간에 \n 을 통해 줄바꿈을 수행한다.

const introduceMe = "I'm Dev Cho\nNice to meet you"

console.log(introduceMe)

 

아래와 같은 결과가 나오는 것을 확인할 수 있다. 줄바꿈이 한 번 수행되어 I'm Dev Cho와 Nice to meet you가 서로 다른 줄에 있는 것을 확인할 수 있다. 

 

 

정리

• String을 선언할 때는 "[문자열]",'[문자열]',`[문자열]` 세가지를 사용할 수 있다.
• 문자열 선언자 ',",`가 내부에 포함되어야 할 때는 escape 문자 \와 함께 쓰거나, 서로 다른 선언자를 사용하면 된다.
• `[문자열]` 만 템플릿 리터럴(${}) 을 사용해 변수를 문자열 중간에 포함할 수 있다.
• 줄 바꿈을 위해서는 `[문자열]` 내부에서 엔터를 사용하면 된다.
• 만약 "[문자열]",'[문자열]' 내부에서 줄 바꿈을 하려면 \n 을 사용하면 된다.