728x90 300x250 SMALL Front-end/React115 태그드 템플릿 리터럴 태그드 템플릿 리터럴이란?간단히 말해, 템플릿 리터럴 앞에 함수(예: myTag)를 붙여서 문자열을 가공할 수 있는 기능const name = "철수";console.log(myTag`${name}입니다.`);위 코드에서 myTag는 태그 함수이다.즉, 템플릿 리터럴을 가공할 함수를 지정하는 것이다.2. 태그드 템플릿 리터럴 동작 방식일반적인 템플릿 리터럴(`${name}입니다.`)을 쓰면, 그냥 변수가 문자열에 삽입된다.하지만 태그 함수가 붙으면, 문자열과 변수를 따로 전달받아 가공할 수 있다.function myTag(strings, ...values) { console.log(strings); // ['','입니다.'] console.log(values); // ['철수']}const name .. 2025. 2. 27. 템플릿 리터럴 심화! 태그드 vs 언태그드 차이점 태그드 탬플릿 이란?태그 함수를 사용하여 템플릿 리터럴을 커스터마이즈할 수 있다.백틱 앞에 함수 이름(태그 함수)을 붙여서 템플릿 리터럴을 처리한다.태그함수는 템플릿 리터럴을 입력받아 직접 조작하거나 결과를 반환한다.문법tagFunction`문자열 템플릿`; 예제function myTag(strings, ...values) { console.log(strings); // 문자열 배열 console.log(values); // 삽입된 값들 return "Processed Template";}const name = "Alice";const age = 30;const result = myTag`My name is ${name}, and I am ${age} years old.`;console.log(r.. 2025. 2. 26. 템플릿 리터럴의 기본! 언태그드 템플릿 리터럴이란? 우리가 일반적으로 사용하는 템플릿 리터럴이다.백틱(`) 안에 변수를 삽입하거나 표현식을 사용해 문자열을 작성한다.추가적인 처리가 필요 없으며 그대로 문자열로 평가됩니다.const name = "Alice";const age = 30;const message = `My name is ${name}, and I am ${age} years old.`;console.log(message);// 출력: My name is Alice, and I am 30 years old. 2025. 2. 25. 템플릿 리터럴 ${} 로 문자열 쉽게 다루자 템플릿 리터럴(Templage Literal)은 ES6에서 도입된 문자열 처리 방법으로, 기존의 문자열 연결이나 문자열 정의 방식보다 더 직관적이 강력한 기능을 제공한다. 1. 기본 문법const message = `Hello, World!`;console.log(message); // Hello, World! 템플릿 리터럴은 백틱(backtick, `)으로 문자열을 감싸서 정의한다. 2. 주요 기능(1) 표현식 삽입템플릿 리터럴은 ${}구문을 사용해 문자열에 변수나 표현식의결과를 삽입할 수 있다.const name = "Alice";const age = 30;const greeting = `My name is ${name}, and I am ${age} years old.`;console.log(gre.. 2025. 2. 24. 이전 1 2 3 4 5 6 ··· 29 다음 728x90 반응형 LIST