JavaScript | Template literal

katej927·2020년 11월 23일
0

JavaScript

목록 보기
7/39
post-thumbnail

Template literal

  • 백틱( ` (esc키 밑에 있음))을 사용

장점

sole.log(
`안녕하세요 저의 이름은 "${name}"입니다. 
직업은 "${job}" 이구요
취미는 "${hobby}" 입니다.`
)
 
출력 --> 안녕하세요 저의 이름은 "홍길동"입니다. 
직업은 "프로그래머" 이구요
취미는 "게임하기" 입니다.
  • 1 줄바꿈 지원: 단순 코드상의 줄바꿈을 통해서.

  • 2 문자열 안에서 자유로운 따옴표 사용

  • 3 ${변수명}의 형태로 특정 변수 전달 가능

    var language = 'Javascript';
    var expression = `I love ${language}!`;
    console.log(expression); // I love Javascript!
    	_(변수명 형태)_

    ${} 안에서 특정 표현식 사용/ 간단한 연산 가능

    1. ${변수명}의 형태로 특정 변수 전달 가능

      var language = 'Javascript';
      var expression = `I love ${language}!`;
      console.log(expression); // I love Javascript!

      ${} 안에서 특정 표현식 사용/ 간단한 연산 가능

      console.log(
      `${1+1}`
      )
       
      출력 --> 2

      (특정 표현식)

      var language = 'Javascript';
      var expression = `I love ${language.split('').reverse().join('')}!`;
      console.log(expression); // I love tpircsavaJ!

      간단한 연산 (위 코드는 language의 문자열 순서를 역으로 바꾸는 코드입니다.)

  • 4 ${변수명}의 형태로 특정 변수 전달 가능

단점

  • 들여쓰기 모두 반영 (trim함수로 해결!)

    → 문제: 템플릿 문자열의 백틱()안의 모든 공백은 문자열의 일부문이므로 들여쓰기가 모두 반영됨.

    → 해결: trim함수(문자열 앞 뒤쪽 공백 제거) 사용

    ex.

    let hw =
    `
    Hello
    world!
    `**.trim()**;
    console.log(hw);
     
    // 출력
    Hello
    world!
profile
복습 목적 블로그 입니다.

0개의 댓글