[JS]이스케이프를 문자열로 처리하는 String.raw() 메서드

해당 포스팅은 String.raw() 메서드의 필요성과 사용 방법을 설명합니다.

개요

JavaScript에서 문자열을 설정하는 방법은 크게 두 가지로 분류된다. 첫 번째 방법은 작은따옴표(') 또는 큰 따옴표(")를 사용하는 것이고 두 번째 방법은 백틱(`)을 사용하는 것이다.

// 작은 따옴표(') 또는 큰 따옴표(")를 사용하여 문자열 할당
const str1 = 'Hello';
const str2 = "Hello";

// 백틱(`)을 사용하여 문자열 할당
const str3 = `Hello`;

백틱을 사용하여 문자열을 할당하는 것을 템플릿 리터럴(Template literals)이라고 말하는데 줄 바꿈을 처리하기 위해 이스케이프를 작성하지 않아도 된다는 장점이 있다.

const str1 = "Hi,\nmy\nname\nis\nJavaScript";
const str2 = `Hi,\nmy
name
is\nJavaScript`;

console.log(str1);
console.log(str2);

[실행 결과]

위 예제에서 알 수 있는 것은 따옴표와 템플릿 리터럴 둘 다 문자 "\n"을 그대로 출력하지 않고 이스케이프 문자로 해석한다는 것이다. 따라서, 문자 "\n"을 그대로 전달하거나 출력하는 과정에서 몇 가지 문제가 발생할 수 있다.

 

예를 들어, 파일 경로를 콘솔에 출력한다고 가정하자.

const filePath = `C:\number.jpeg`;

console.log(filePath);

[실행 결과]

C:
umber.jpeg

파일 이름은 number.jpeg인데, 문자열에 포함된 "\n"을 이스케이프 문자로 해석하여 파일 경로를 정상적으로 출력하지 못하는 문제가 발생한다.

 

String.raw()

JavaScript는 템플릿 리터럴에서 원시 문자열(이스케이프 문자로 해석되지 않은 문자열)을 접근할 수 있는 String.raw() 메서드를 제공한다.

 

아래는 String.raw() 메서드를 사용하는 간단한 예시다.

const filePath = String.raw`C:\number.jpeg`;

console.log(filePath);

[실행 결과]

C:\number.jpeg

String.raw() 메서드는 일반 함수와는 달리 소괄호 대신 백틱을 사용할 수 있으며 소괄호를 사용하는 구문은 복잡해서 잘 사용되지 않는다.

 

소괄호를 사용하는 경우 아래 구문을 따라야 한다.

String.raw(callSite, ...substitutions);

매개 변수

callSite

- 정해진 형식의 객체

 

...substitutions

- 템플릿 리터럴

 

반환 결과

원시 문자열을 반환한다.

 

예외 및 에러

첫 번째 매개변수의 형식이 올바르지 않은 경우 TypeError 예외가 발생한다.

 

아래는 백틱이 아닌 소괄호를 사용하는 String.raw() 메서드 예제이며, 어떻게 동작하는지 주석을 통해 알 수 있다.

const java = 'Java'
const script = 'Script'
const name = 'HongGilDong'

// `foo${2+3}bar${java + script}baz${name}fye`과 동일하다.
const rawResult1 = String.raw({ 
    raw: ['foo', 'bar', 'baz', 'fye '] 
  }, 2 + 3, java + script, name);

console.log(rawResult1); // foo5barJavaScriptbazHongGilDongfye

// `t${2+3}e${java + script}s${name}t`와 동일하다.
const rawResult2 = String.raw ({
    raw: 'test'
  }, 2 + 3, java + script, name);

console.log(rawResult2); // t5eJavaScriptsHongGilDongt

 

첫 번째 매개변수로 전달된 객체에 raw 프로퍼티가 없는 경우 TypeError가 발생한다.

const java = 'Java'
const script = 'Script'
const name = 'HongGilDong'

const rawResult = String.raw ({
    address: 'test'
  }, 2 + 3, java + script, name);

[예외 및 에러 내용]

 

정리

• 따옴표 또는 템플릿 리터럴은 이스케이프 문자를 원시 문자열로 취급하지 않습니다.
• 이스케이프 문자를 원시 문자열로 취급하려면 String.raw() 메서드를 사용합니다.