[javascript] 문자열 리터럴과 템플릿 리터럴, 그리고 태그드 템플릿

문자열 리터럴

리터럴은 선언과 동시에 값을 적용해 생성하는 방식을 말합니다.

let str = '문자열'; 

이런 선언 방식을 리터럴이라고 하며, 문자열을 이런 방식으로 생성하는 것을 문자열 리터럴이라고 합니다.

그와 달리 let str =  new String('문자열 객체'); 처럼 객체로 생성하는 방식도 있습니다.

리터럴은 선언과 동시에 해당되는 변수에 값을 대입해 생성하는 방식이므로 

let obj = {item: '자동차'};

이렇게 객체 선언과 동시에 객체의 값을 대입해 생성하는 방식은 객체 리터럴이라고 합니다.

문자 리터럴

문자열에서 문자 1개는 문자 리터럴이라고 하고, 문자 리터럴에는 용도가 정해진 특수 문자 리터럴들이 있습니다.

대부분 열슬래시와 조합해 그 용도를 표기하고, 문자열을 제어하는 용도로 주로 사용합니다.

문자열에 사용할 수 있는 특수 용도 문자 리터럴은 다음과 같은 것들이 있습니다.

이 특수 문자 리터럴을 이스케이프 문자라고도 합니다.

템플릿 리터럴

ES6 에서 새롭게 추가된 기능으로 표현식을 허용하는 문자열 리터럴입니다.

표현식은 자바스크립트 런타임 시점에 같은 변수로 선언한 리터럴 문자열의 값으로 변환됩니다.

즉, 문자열 리터럴 안에 자바스크립트 변수와 같은 기능을 하는 같은 이름의 심볼을 넣어서 런타임 시점에 원하는 문자열로 갈아 끼울 수 있습니다.

템플릿 리터럴은 역따옴표(Backquote, Backticks) 로 감싸서 일반 문자열 선언과는 다르게 구분합니다.

일반 문자열은 '', "" 를 사용하지만, 템플릿 리터럴은 반드시 `` 로 감싸야 하며, '',"" 로 감싸게 되면 표현식이 문자열의 일부로 취급되어 템플릿의 기능을 하지 않게 됩니다.

템플릿 리터럴의 표현식은 "${expression}" 로 표현합니다.

expression 은 변수명의 역할을 하게 되며 자바스크립트 변수명을 그대로 사용합니다.

let str1 = 'good';let template = `${str1} morning, ${str1} afternoon, ${str1} evening, and ${str1} night`;
//template 변수에는 str1 변수의 문자열이 적용된 결과가 저장됩니다.
console.log(template); // 'good morning, good afternoon, good evening, and good night' 를 반환

고급 템플릿 리터럴 - 태그드 템플릿

변수값을 그대로 대입해 결과 문자열을 반환하는 간단한 템플릿 리터럴은 변수값 그대로를 대입하기 때문에 조건에 따라 다른 값을 대입하는 것이 불가능합니다.

태그드 템플릿은 중간 적용 함수를 작성해 입력받은 변수값을 조건에 따라 다른 값으로 변환해 템플릿에 적용할 수 있도록 합니다.

중간 처리 함수를 구현하는게 처음에는 어려울 수 있으므로 함수로 넘어가는 파라메터를 잘 이해하는 것이 중요합니다.

표현식 변수는 str1 이지만, 중간 함수인 taggedFunc()를 이용해 표현식에 대입하는 문자열을 조건에 맞춰 변경해주는 함수입니다.

let str1 = 'good'; 
//파라메터//strings는 표현식 사이의 문자열들만 남긴 문자열 배열. 첫번째 인자로 넘어갑니다.
//exp는 표현식이 들어갑니다. 템플릿 리터럴에 표현식이 2가지 들어가면 exp1, exp2 이런식으로 갯수를 맞춰야 합니다.
function taggedFunc(strings, exp){
  //반환값 저장 변수
  let ret = '';
  for(let idx = 1; idx < strings.length; idx++){
    // 루프를 도는 시작 인덱스와 갯수에 주의해야 합니다. strings 가 표현식을 기준으로 분리한 나머지 문자열들의 배열이라는 것을 이해하면 쉽습니다.
    if(idx < strings.length-1){
      ret += 'bad' + strings[idx]; // 마지막 표현식이 아닌 경우 'bad' 문자열로 대입
    }else{
      ret += 'moon' + strings[idx]; // 마지막 표현식인 경우 'moon' 문자열로 대입
    }
  }
  return ret; //결과 문자열 반환
}
//중간 함수 taggedFunc 바로 뒤에 역따옴표로 감싼 템플릿 리터럴을 붙여서 파라메터로 넘깁니다.
let result = taggedFunc`${str1} morning, ${str1} afternoon, ${str1} evening, and ${str1} night`;
console.log(result);