Funciones de plantilla etiquetada
Procese las partes de una plantilla con funciones de etiqueta.
Funciones de plantilla etiquetada es una lección gratuita de JavaScript Academy en CoddyKit. Esta es la lección 3 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de JavaScript Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de JavaScript Academy incluye 4 lecciones en total.
Qué es una función de etiqueta
Una plantilla etiquetada es una llamada a una función en la que el nombre de la función aparece directamente antes de un literal de plantilla. La función recibe las partes analizadas de la plantilla y puede transformarlas.
function tag(strings, value) {
return strings[0] + value.toUpperCase() + strings[1]
}
console.log(tag(["Hi ", "!"], "bob"))El array de cadenas
El primer argumento que recibe una función de etiqueta es un array con las partes de cadena literal. Son los fragmentos de texto situados entre los marcadores y alrededor de ellos.
function tag(strings) {
return strings.join("|")
}
console.log(tag(["a", "b", "c"]))Los valores
Después del array de cadenas, la función de etiqueta recibe cada valor interpolado como un argumento independiente. Los parámetros rest permiten recopilarlos en un array.
function tag(strings, ...values) {
return values.join(",")
}
console.log(tag(["", " and ", ""], "x", "y"))Volver a ensamblar la cadena
Una etiqueta típica recorre el array de cadenas e inserta cada valor entre las partes, reconstruyendo la cadena final con la transformación que desee.
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))Regla de longitud del array de cadenas
El array de cadenas siempre tiene exactamente un elemento más que el array de valores. Hay texto antes del primer marcador y después del último, aunque algunas partes estén vacías.
function tag(strings, ...values) {
return "strings=" + strings.length + " values=" + values.length
}
console.log(tag(["", "", ""], 1, 2))Transformar valores
Como la etiqueta controla cómo se insertan los valores, puede darles formato. Aquí, cada valor numérico se duplica antes de insertarse.
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))Devolver valores que no sean cadenas
Una función de etiqueta no tiene que devolver una cadena. Puede devolver cualquier valor, como un objeto o un array creado a partir de las partes de la plantilla.
function parts(strings, ...values) {
return { strings: strings, values: values }
}
const r = parts(["a", "b"], 9)
console.log(r.values[0])La propiedad raw
El array de cadenas también incluye una propiedad raw, que contiene las cadenas sin procesar las secuencias de escape. Así es como funciona String.raw.
console.log(String.raw({ raw: ["a\\n", "b"] }, "X"))Convertir interpolaciones a mayúsculas
Una etiqueta de demostración común convierte a mayúsculas todos los valores interpolados, pero deja intacto el texto estático.
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"))Por qué usar etiquetas
Las funciones de etiqueta permiten aplicar patrones potentes: escapar entradas no confiables, internacionalizar, construir SQL o consultas y aplicar formatos personalizados, todo a partir de la estructura de la plantilla.
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))Ignorar valores
Una etiqueta puede optar por ignorar por completo los valores interpolados y generar una salida basada únicamente en las partes estáticas, lo que resulta útil para análisis o registros.
function onlyStatic(strings) {
return strings.filter(function (s) { return s.length > 0 }).join(" ")
}
console.log(onlyStatic(["Hello ", " world ", ""]))Comprobación rápida
Compruebe sus conocimientos sobre las funciones de etiqueta.
Resumen
Resumen: Las plantillas con etiquetas llaman a una función con las partes analizadas de la plantilla.
- El primer argumento es el arreglo strings
- Los argumentos restantes son los valores interpolados
- strings tiene un elemento más que values
- La propiedad raw contiene el texto sin procesar
function tag(s, ...v) { return s[0] + v[0] }
console.log(tag(["go "], "fast"))
Aprende JavaScript con un tutor de IA — gratis
Escribe y ejecuta código real en tu navegador, obtén ayuda instantánea de un tutor de IA disponible 24/7 y continúa donde lo dejaste en la web o en la aplicación.
- Cursos
- 59
- Lecciones
- 200
Preguntas frecuentes
¿La lección «Funciones de plantilla etiquetada» es gratis?
Sí — el texto completo de «Funciones de plantilla etiquetada» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de JavaScript Academy, actualiza a CoddyKit PRO. El curso de JavaScript Academy incluye 4 lecciones en total.
¿Qué aprenderé en «Funciones de plantilla etiquetada»?
Procese las partes de una plantilla con funciones de etiqueta. Practicas JavaScript Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar JavaScript Academy?
No se requiere experiencia previa. JavaScript Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 3 de 4.
¿Cuánto tiempo toma la lección «Funciones de plantilla etiquetada»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de JavaScript Academy?
Sí. Cada lección de JavaScript Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- Fundamentos de la interpolación de cadenas
- Cadenas multilínea
- Funciones de plantilla etiquetada
- Casos prácticos de plantillas etiquetadas