태그된 템플릿 함수
태그 함수를 사용하여 템플릿의 각 부분을 처리합니다.
태그된 템플릿 함수은(는) CoddyKit의 무료 JavaScript Academy 강의입니다. 이것은 4개 중 3번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 JavaScript Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. JavaScript Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
태그 함수란
태그 템플릿은 함수 이름을 템플릿 리터럴 바로 앞에 배치하는 함수 호출입니다. 함수는 템플릿을 분석한 구성 요소를 받아 변환할 수 있습니다.
function tag(strings, value) {
return strings[0] + value.toUpperCase() + strings[1]
}
console.log(tag(["Hi ", "!"], "bob"))문자열 배열
태그 함수가 받는 첫 번째 인수는 리터럴 문자열 부분의 배열입니다. 이 부분들은 자리 표시자 사이와 양옆에 있는 텍스트 덩어리입니다.
function tag(strings) {
return strings.join("|")
}
console.log(tag(["a", "b", "c"]))값
문자열 배열 다음에 태그 함수는 보간된 각 값을 별도의 인수로 받습니다. 나머지 매개변수를 사용하면 이 값들을 배열로 모을 수 있습니다.
function tag(strings, ...values) {
return values.join(",")
}
console.log(tag(["", " and ", ""], "x", "y"))문자열 재조립하기
일반적인 태그 함수는 문자열 배열을 순회하며 각 부분 사이에 값을 삽입하고, 원하는 변환을 적용하여 최종 문자열을 다시 만듭니다.
function tag(strings, ...values) {
let out = ""
strings.forEach(function (s, i) {
out += s + (values[i] !== undefined ? values[i] : "")
})
return out
}
console.log(tag(["A", "B", "C"], 1, 2))문자열 길이 규칙
문자열 배열에는 항상 값 배열보다 요소가 하나 더 많습니다. 일부 부분이 비어 있더라도 첫 번째 자리 표시자 앞과 마지막 자리 표시자 뒤에 텍스트가 존재하기 때문입니다.
function tag(strings, ...values) {
return "strings=" + strings.length + " values=" + values.length
}
console.log(tag(["", "", ""], 1, 2))값 변환하기
태그 함수가 값을 삽입하는 방식을 제어하므로 값의 형식을 지정할 수 있습니다. 여기서는 삽입하기 전에 모든 숫자 값을 두 배로 만듭니다.
function dbl(strings, ...values) {
let out = ""
strings.forEach(function (s, i) {
out += s + (values[i] !== undefined ? values[i] * 2 : "")
})
return out
}
console.log(dbl(["", " ", ""], 3, 4))문자열이 아닌 값 반환하기
태그 함수가 반드시 문자열을 반환해야 하는 것은 아닙니다. 템플릿 구성 요소로 만든 객체나 배열처럼 어떤 값이든 반환할 수 있습니다.
function parts(strings, ...values) {
return { strings: strings, values: values }
}
const r = parts(["a", "b"], 9)
console.log(r.values[0])raw 속성
문자열 배열에는 이스케이프 시퀀스를 처리하지 않은 문자열을 담는 raw 속성도 있습니다. String.raw는 이 속성을 사용합니다.
console.log(String.raw({ raw: ["a\\n", "b"] }, "X"))보간값 대문자 변환
일반적인 데모 태그는 정적 텍스트는 그대로 두고 모든 보간값을 대문자로 변환합니다.
function loud(strings, ...values) {
let out = ""
strings.forEach(function (s, i) {
out += s + (values[i] !== undefined ? String(values[i]).toUpperCase() : "")
})
return out
}
console.log(loud(["name is ", "."], "alice"))태그를 사용하는 이유
태그 함수는 신뢰할 수 없는 입력의 이스케이프 처리, 국제화, 구조화 질의 언어 또는 쿼리 생성, 사용자 지정 서식 지정과 같은 강력한 패턴을 템플릿 구조를 기반으로 구현할 수 있게 합니다.
function highlight(strings, ...values) {
let out = ""
strings.forEach(function (s, i) {
out += s + (values[i] !== undefined ? "[" + values[i] + "]" : "")
})
return out
}
console.log(highlight(["score: ", " pts"], 42))값 무시하기
태그는 보간된 값을 모두 무시하고 정적 부분만을 기반으로 출력을 생성할 수 있어 분석이나 기록에 유용합니다.
function onlyStatic(strings) {
return strings.filter(function (s) { return s.length > 0 }).join(" ")
}
console.log(onlyStatic(["Hello ", " world ", ""]))간단히 확인하기
태그 함수에 대한 지식을 확인해 보세요.
복습
복습: 태그된 템플릿은 분석된 템플릿 부분을 함수에 전달해 호출합니다.
- 첫 번째 인수는 문자열 배열입니다
- 나머지 인수는 보간된 값입니다
- 문자열 배열에는 값보다 요소가 하나 더 있습니다
- raw 속성에는 처리되지 않은 텍스트가 담깁니다
function tag(s, ...v) { return s[0] + v[0] }
console.log(tag(["go "], "fast"))자주 묻는 질문
“태그된 템플릿 함수” 강의는 무료인가요?
네 — “태그된 템플릿 함수” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 JavaScript Academy 강의 전체를 잠금 해제할 수 있습니다. JavaScript Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
“태그된 템플릿 함수”에서 뭘 배우나요?
태그 함수를 사용하여 템플릿의 각 부분을 처리합니다. 브라우저에서 직접 실행하는 실습 코드로 JavaScript Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.
JavaScript Academy을(를) 시작하는 데 경험이 필요한가요?
사전 경험은 필요하지 않습니다. CoddyKit의 JavaScript Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 3번째 강의입니다.
“태그된 템플릿 함수” 강의는 얼마나 걸리나요?
대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.
이 JavaScript Academy 강의에서 코드를 작성하고 실행할 수 있나요?
네. 모든 JavaScript Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.
이 강의의 모든 강의
- 문자열 보간 기초
- 여러 줄 문자열
- 태그된 템플릿 함수
- 태그된 템플릿 실전 활용 사례