안녕하세요 여러분 👋

안녕 친구들, 여기는 SnowBit입니다. 저는 젊은 열정적이고 독학으로 프론트엔드 웹 개발자이며 성공적인 개발자가 되려는 의도가 있습니다.

이 기사에서는 Javascript - Template Literals에서 매우 유용한 주제를 설명할 것입니다.

템플릿 리터럴이란 무엇입니까?

Javascript에서 템플릿 리터럴은 역따옴표를 사용하여 큰따옴표("") 및 작은따옴표('') 대신 문자열을 정의합니다.

템플릿 리터럴은 2015년에 도입된 ES6 기능입니다.

이미지 출처: IOSHacker

이익

따옴표가 허용됨

템플릿 리터럴을 사용할 때 문자열 내에서 큰따옴표와 작은따옴표를 모두 사용할 수 있습니다.

const x = "I love \"JS\"" // without template literals

const y = `I love "JS"`

보시다시피 변수에 할당된 리터럴 따옴표를 이스케이프 처리하기에는 너무 복잡합니다x. 그리고 템플릿 리터럴이 있는 문자열 내에서 따옴표를 사용하는 것은 너무 간단합니다.

FreeCodeCamp has a great explanation on "Escaping literal quotes in a string" the thing that I have done on variable "x" in the above code snippet

여러 줄 문자열

일반적으로 Javascript에서는 큰따옴표와 작은따옴표로 여러 줄 문자열을 작성할 수 없습니다. 대신 \n를 사용하여 줄을 끊어야 합니다.

const a = 
"I
love 
JS" // ❌

const b = "I\nlove\nJS" // ✅

템플릿 리터럴

아무런 제한 없이 템플릿 리터럴로 여러 줄을 완벽하게 작성할 수 있습니다.

const multiLineStr = `
I
Love
JavaScript
`

문자열 내부의 변수

일반적으로 문자열을 변수나 식과 연결하기 위해 모두 더하기(+)를 사용합니다.

const hello = (name) => {
    return "Hello " + name;
}


const favouriteFood = "Pizza"
console.log("My favourite food is " + favouriteFood)

템플릿 리터럴을 사용하면 작업이 훨씬 간단해집니다.

const hello = (name) => {
     return `Hello ${name}`;
}

const favouriteFood = "Pizza"
console.log(`My favourite food is ${favouriteFood}`)

템플릿 리터럴에서 변수를 전달할 때 변수는 중괄호로 묶고 앞에 달러 기호($)를 붙여야 합니다.

문자열의 식

템플릿 리터럴을 사용하면 변수처럼 문자열에 식을 전달할 수 있습니다.

const sum = (a, b) => {
   return `Sum of ${a} and ${b} is equal to ${a+b}`
}

const PI = `Value of PI is ${Math.PI}`

템플릿 리터럴을 사용해야 합니까?

예. 이 많은 이점을 보고 🤩 템플릿 리터럴을 사용하게 되었습니다. 아래 의견에 사용에 대한 귀하의 생각을 알려주십시오. 귀하의 의견을 읽으면 기쁩니다.


읽어주셔서 감사합니다. 좋은 하루 보내세요!
당신의 감사는 나의 동기입니다 😊

Twitter에서 나를 팔로우하세요 -

YouTube에서 저를 구독하세요 -