[JS] 문자열 (생성, 이스케이프, 백틱)

문자열 생성 시 작은따옴표('') 나 큰따옴표("")를 정해 사용!

대신 섞어 사용하면 안 되고 일관성 있게 하나만 사용하기!

예를 들어,

'안녕하세요'  "안녕하세요" 같이 따옴표 사이에 있는 모든 것들이 하나의 텍스트로 간주된다

 

작은따옴표 출력할 때

큰따옴표 활용 

let hello = "'안녕하세요'";

작은따옴표가 포함된 문자열을 출력하고자 한다면 이를 큰 따옴표로 감싼다

문자열을 생성하기 위해 큰따옴표를 사용했기 때문에 그 사이에 모든 것은 텍스트로 간주된다

 

백틱(`) 사용하기

백틱은 Tab 키보드 위에 위치한다

let calculation = `(${default} + 10) * 3 / 2 - 1`;

위의 식과 같이 백틱을 사용하면 문자열 안에 있는 상수를 ${}를 이용해 쉽게 구현할 수가 있다

이건 짱짱 유용한 기능!!!

계산의 결과 또는 변수나 상수에 저장된 값 등의 동적인 값을 텍스트 내부에 주입하고자 할 때 훨씬 더 간단히 표현 가능하다 

이렇게 되면 다수의 문자열을 + 연산자로 조합하는 수동 문자열 접합을 할 필요가 없어진다

이와 같은 과정 전체를 템플릿 리터럴이라고 부른다

 

템플릿 리터럴의 편리한 점 중 하나는 여러 행으로 된 문자열(실제로 줄 바꿈이 포함된 문자열)을 쉽게 작성할 수 있다는 것

let calculation = `(${default} + 10)


* 3 / 2 - 1`;

위와 같이 코드 작성을 하면 실제 줄 바꿈이 적용된다

백틱을 사용한 템플릿 리터럴이기 때문에 허용되는 형태이다

작은따옴표나 큰따옴표를 이용한 문자열은 허용되지 않기 때문에 엄청 유용한 기능이라는 거~

하지만 실제 웹 페이지 화면을 보면 적용이 안된 것을 볼 수 있는데 크롬에 개발자 도구를 가서 코드를 보면 공란이 반영된 것을 볼 수 있다

이는 사용자가 해당 코드에 스타일을 적용해서 렌더링 되었을 가능성이 큰데 

해당 문자열 태그 css에 white-space: pre;를 추가하면 공란이 화면상에도 표시되는 것을 볼 수 있다

즉 템플릿 리터럴 구문을 사용하면 쉽게 줄 바꿈을 추가할 수 있다 꿀 기능

 

작은따옴표 또는 큰따옴표 사이에 포함된 문자열에 실제로 줄 바꿈을 추가하기 위해서는 특수 문자 또는 특수 문자의 조합을 사용하면 된다

\n을 추가하기!!

화면상에 렌더링이 이루어질 때 \n은 출력하는 것이 아니라 자동으로 줄 바꿈으로 인식한다

 

이 기능은 템플릿 리터럴에서도 사용이 가능하지만 굳이 이렇게 할 필요는 없다

템플릿 리터럴에서는 더 편리하게 Enter 키로 줄 바꿈을 하면 자동으로 반영되기 때문

 

문자열에서 \를 사용하는 것에는 특별한 의미가 있다

\ 는 뒤에 오는 문자를 탈출시키는 기능을 가지고 있는데 

\ 뒤에 문자가 오면 일반적인 문자가 아닌 \와 결합함으로써 특별한 의미를 가지게 된다

\n 경우에는 n을 탈출시켰고 n을 출력하지 않는다

대신 \와 n이 조합되면 새로운 의미인 줄 바꿈이 된다

 

이 외에도 더 많은 조합이 있다

\ ' 

' 앞에 \를 추가해 작은따옴표가 가지는 일반적인 의미를 탈락시킴으로써 일반적인 의미와 달라지게 한다

 

\\ 

문자열에서 \를 출력하고자 할 때는 \\ 두 개를 사용

\ 뒤의 문자가 특별한 의미를 가짐을 JS에게 알려준다고 생각하면 쉽다

 

\n \\ \'는 자주 사용하는 것이다 기억해두면 유용하다

 

더 많은 정보는 아래 사이트를 참고해보면 유용하다

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String#Escape_notation