Contenido del curso

Fundamentos Javascript

Funciones, Scope y Estructuras de Datos

DOM y Experiencia en el Navegador

Modulos y Asincronía

Template literals en JavaScript: sintaxis y uso práctico

Resumen

Aprende a dominar los strings en JavaScript con técnicas modernas y claras. Aquí verás por qué son primitivos inmutables, cómo evitar errores comunes al concatenar y cómo los template literals de ECMAScript 6 simplifican la interpolación, las expresiones y el texto multilínea. Todo con ejemplos prácticos y directos.

¿Qué son los strings y por qué son primitivos inmutables?

Los strings son primitivos inmutables: cada operación que aparenta “modificar” un string crea uno nuevo. El valor original no cambia. Esto es clave para razonar sobre memoria y evitar efectos inesperados.

También puedes usar comillas simples o dobles para definir strings. No hay una regla estricta, elige la que prefieras.

Ejemplo básico y salida en consola con varios parámetros.

// Variables y comillas simples.
const nombre = 'JavaScript';
const version = '6';

// Imprimir varios valores en una sola línea.
console.log(nombre, version); // JavaScript 6

Ideas clave:

Inmutabilidad: cada cambio genera un nuevo string.
Comillas simples o dobles: elige la que te acomode.
console.log con coma: imprime varios valores sin concatenar.

¿Cómo concatenar y por qué usar template literals en ECMAScript 6?

La concatenación con + funciona, pero es propensa a errores y dificulta la lectura. Con template literals (las comillas invertidas) puedes interpolar variables con ${}, reducir fallos y escribir frases más limpias.

¿Qué problemas causa la concatenación con '+'?

Fácil olvidar un espacio o un operador +.
Frases largas se vuelven difíciles de leer.
Aumenta la posibilidad de errores por edición.

// Concatenación tradicional con +.
const mensaje = 'Bienvenido a ' + nombre + ', versión ' + version + '.';
console.log(mensaje);

¿Cómo simplifican los template literals la interpolación?

Interpolas variables con ${variable} de forma clara.
Mejor legibilidad en frases largas.
Puedes comentar líneas que no quieras ejecutar usando //.

// Template literals con interpolación.
const mensaje2 = `Bienvenido y bienvenida al curso de ${nombre} en su versión: ${version}.`;
console.log(mensaje2);

// Comentar líneas que no se ejecutan.
// console.log('Línea desactivada');

¿Cómo evaluar expresiones, typeof y multilínea con template literals?

Los template literals permiten evaluar expresiones dentro de ${}. También facilitan crear texto multilínea para formatos como Markdown. Ojo con dos detalles frecuentes: errores por typo en nombres de variables y olvidar imprimir valores en consola.

// Expresiones dentro de template literals.
const precio = 100;
const cantidad = 3;
const total = `${precio * cantidad}`; // El resultado queda como string.

console.log(total);        // 300
console.log(typeof total); // 'string'

El operador typeof muestra que total es un string, aunque uses números dentro de ${}. Más adelante se profundiza en la coerción de tipos.
Un typo como escribir una variable inexistente genera ReferenceError.
Si no usas console.log, no verás el resultado en la consola.

Texto multilínea con formato tipo Markdown usando saltos de línea nativos.

// Multilínea con template literals.
const nota = `
Mi nota
Este es el contenido
- nota uno
- nota dos
`;
console.log(nota);

Habilidades y conceptos reforzados:

Primitivos inmutables y creación de nuevos strings al “modificar”.
Interpolación con ${} y mejor legibilidad con template literals.
Concatenación con + y sus riesgos al escalar.
Expresiones evaluadas dentro de template literals.
Multilínea nativo para estructurar contenido tipo Markdown.
Console.log, comentarios con // y diagnóstico con typeof.
Atención a errores por variables mal escritas y a ejecutar el bloque completo.

¿Te quedaron dudas o quieres compartir tus propios ejemplos con template literals y multilínea? Deja tu comentario y cuéntanos cómo lo aplicarías en tu proyecto.

Steven Andres Moreno Melendez

student•

// ============================================
// Reto: Template literals en JavaScript
// ============================================
// Completa cada función usando template literals (comillas invertidas `)
// y la interpolación ${} cuando se indique.
// Ejecuta los tests con: npx vitest src/04-template-literals
// ============================================

// --- Reto 1: Mensaje de bienvenida con interpolación ---
// Recibe "nombre" (ej: "JavaScript") y "version" (ej: "6").
// Retorna el string: "Bienvenido a [nombre], versión [version]."
// Usa template literals con ${nombre} y ${version}.
function crearMensajeBienvenida(nombre, version) {
    return `Bienvenido a ${nombre}, versión ${version}.`; // Tu código aquí
}

// --- Reto 2: Concatenación tradicional (contraste con +) ---
// Recibe dos strings "parte1" y "parte2".
// Retorna un solo string uniendo parte1 + " " + parte2 (concatenación con +).
function concatenarConMas(parte1, parte2) {
    return parte1 + " " + parte2;// Tu código aquí
}

// --- Reto 3: Interpolar variables en una frase ---
// Recibe "nombre" (ej: "JavaScript") y "curso" (ej: "Fundamentos").
// Retorna: "Curso de [nombre]: [curso]." usando template literals.
function interpolarVariables(nombre, curso) {
    return `Curso de ${nombre}: ${curso}.`;// Tu código aquí
}

// --- Reto 4: Expresión dentro de template literal ---
// Recibe "precio" (número) y "cantidad" (número).
// Retorna un string con el resultado de precio * cantidad usando
// un template literal: `${precio * cantidad}` (el resultado queda como string).
function calcularTotalComoString(precio, cantidad) {
    return `${precio * cantidad}`; // Tu código aquí
}

// --- Reto 5: Tipo de dato del resultado de interpolación ---
// Sin parámetros. Retorna el tipo de dato de la expresión `${1 + 2}`.
// Pista: usa typeof. El resultado de interpolación siempre es string.
function tipoDeResultadoInterpolado() {
    return typeof `${1 + 2}`;// Tu código aquí
}

// --- Reto 6: Texto multilínea con template literals ---
// Recibe "titulo", "item1" e "item2" (strings).
// Retorna un string con varias líneas con este formato (incluye los saltos de línea):
//   [titulo]
//   - [item1]
//   - [item2]
// Usa template literals con saltos de línea nativos (no uses \n).
function crearNotaMultilinea(titulo, item1, item2) {
    return `${titulo}
- ${item1}
- ${item2}`;// Tu código aquí
}

module.exports = {
    crearMensajeBienvenida,
    concatenarConMas,
    interpolarVariables,
    calcularTotalComoString,
    tipoDeResultadoInterpolado,
    crearNotaMultilinea,
};

// ============================================

// Reto: Template literals en JavaScript

// ============================================

// Completa cada función usando template literals (comillas invertidas `)

// y la interpolación ${} cuando se indique.

// Ejecuta los tests con: npx vitest src/04-template-literals

// ============================================

// --- Reto 1: Mensaje de bienvenida con interpolación ---

// Recibe "nombre" (ej: "JavaScript") y "version" (ej: "6").

// Retorna el string: "Bienvenido a [nombre], versión [version]."

// Usa template literals con ${nombre} y ${version}.

function crearMensajeBienvenida(nombre, version) {

return Bienvenido a ${nombre}, versión ${version}.; // Tu código aquí

}

// --- Reto 2: Concatenación tradicional (contraste con +) ---

// Recibe dos strings "parte1" y "parte2".

// Retorna un solo string uniendo parte1 + " " + parte2 (concatenación con +).

function concatenarConMas(parte1, parte2) {

return parte1 + " " + parte2;// Tu código aquí

}

// --- Reto 3: Interpolar variables en una frase ---

// Recibe "nombre" (ej: "JavaScript") y "curso" (ej: "Fundamentos").

// Retorna: "Curso de [nombre]: [curso]." usando template literals.

function interpolarVariables(nombre, curso) {

return Curso de ${nombre}: ${curso}.;// Tu código aquí

}

// --- Reto 4: Expresión dentro de template literal ---

// Recibe "precio" (número) y "cantidad" (número).

// Retorna un string con el resultado de precio * cantidad usando

// un template literal: ${precio \* cantidad} (el resultado queda como string).

function calcularTotalComoString(precio, cantidad) {

return ${precio \* cantidad}; // Tu código aquí

}

// --- Reto 5: Tipo de dato del resultado de interpolación ---

// Sin parámetros. Retorna el tipo de dato de la expresión ${1 + 2}.

// Pista: usa typeof. El resultado de interpolación siempre es string.

function tipoDeResultadoInterpolado() {

return typeof ${1 + 2};// Tu código aquí

}

// --- Reto 6: Texto multilínea con template literals ---

// Recibe "titulo", "item1" e "item2" (strings).

// Retorna un string con varias líneas con este formato (incluye los saltos de línea):

// [titulo]

// - [item1]

// - [item2]

// Usa template literals con saltos de línea nativos (no uses \n).

function crearNotaMultilinea(titulo, item1, item2) {

return `${titulo}

- ${item1}

- ${item2}`;// Tu código aquí

}

module.exports = {

crearMensajeBienvenida,

concatenarConMas,

interpolarVariables,

calcularTotalComoString,

tipoDeResultadoInterpolado,

crearNotaMultilinea,

};

Fundamentos Javascript

Primeras líneas de JavaScript en la consola del navegador

Construye un editor de notas Markdown con JavaScript

Configuración del entorno para JavaScript

Var, let y const: qué cambia en JavaScript

Tipos de datos en JavaScript: primitivos vs complejos

Operadores aritméticos en JavaScript