LHJ

I'm a FE developer.

3.7.1 이스케이프

18 Apr 2020 » js_lj

텍스트로 만들어진 프로그램에서 텍스트 데이터를 사용할 때는 항상 텍스트 데이터와 프로그램 자체를 구별할 방법이 필요합니다.
이때 문자열을 따옴표 안에 쓰는 방법이 있습니다.
하지만 문자열 안에 따옴표를 써야 한다면 어떻게 해야 할까요?
이 문제를 해결하려면 따옴표를 이스케이프해서 문자열 주위에 쓰는 부호가 아님을 나타내야 합니다.
다음 예제를 보십시오.
여기에는 이스케이프가 필요하지 않습니다.

const dialog = 'Sam looked up, and said "hello, old friend!", as Max walked in.';
const imperative = "Don't do that!";

dialog 는 작은 따옴표로 감싸여 있으므로 문자열 안에 큰따옴표를 걱정없이 쓸 수 있습니다.
마찬가지로, imperative 는 큰따옴표로 감싸여 있으므로 문자열 안에 아포스트로피를 걱정없이 쓸 수 있습니다.
하지만 두 가지 따옴표를 모두 써야 한다면 어떨까요?
다음을 보십시오.

// 에러가 일어납니다.
const dialog = "Sam looked up and said "don't do that!" to Max.";

dialog 문자열에는 어떤 따옴표를 쓰더라도 에러가 생깁니다.
이때 역슬래시(\) 를 써서 따옴표를 이스케이프 하면 문자열이 여기서 끝나지 않았다고 자바스크립트에 알릴 수 있습니다.
앞에서 본 예제를 다음과 같이 고쳐 쓰면 어떤 따옴표라도 쓸 수 있습니다.

const dialog1 = "He looked up and said \"don't do that!\" to Max.";
const dialog2 = 'He looked up and said "don\'t do that!" to Max.';

당연히 떠오르는 문제가 있습니다.
문자열에서 역슬래시 문자를 써야 할 때는 어떻게 할까요?
다행히 역슬래시는 자기 자신을 이스케이프할 수 있습니다.

const s = "In JavaScript, use \\ as an escape character in strings.";

큰 따옴표를 쓸지, 작은 따옴표를 쓸지는 스스로 정하면 됩니다.

  1. 필자는 사용자에게 표시될 텍스트에는 보통 큰 따옴표를 사용합니다.
    텍스트엔 따옴표보다는 don’t 등의 어포스트로피를 더 많이 쓰는 편이므로, 큰 따옴표를 쓰는 편이 필자에게 맞습니다.
  2. 자바스크립트 문자열 안에 HTML을 쓸 때는 반대로 작은따옴표를 씁니다.
    HTML 문자열을 작은 따옴표로 감싸면 속성값에 큰따옴표를 쓸 수 있기 때문입니다.