자바스크립트 모던 #2 | 템플릿 문자열.

En esta serie de posts aprenderemos features modernas del lenguaje de programación JavaScript que harán de tu vida como programador mucho más fácil, pero antes te dejo las otras entregas de esta serie:

바야모스 알 테마 데 호이. 프리메로, ¿Qué es el "템플릿 문자열"🤔?. En la Mayoría de lenguajes que se utilizan para el desarrollo web es necesario tener un sistema que permita inyectar datos en una plantilla de texto, PHP, JAVA, .NET, Dart etc., tienen soluciones (en librerías in librerías to de manera) y JavaScript는 지원되지 않습니다.

Entendamos esto con un caso de prueba, Imaginemos el siguiente requerimiento:

La aplicación debe saludar cordialmente al usuario por su nombre, apellido e indicar cuántos días faltan para su cumpleaños.

실행에 필요한 기능을 위한 준비 요소 죄악 유틸리티 템플릿 문자열 haríamos lo siguiente

const obtenerSaludo = (nombre, apellido, diasParaCumpleaños) => {
   return "¡Hola " + nombre + " " + apellido + ", faltan " + diasParaCumpleaños + " días para tu cumpleaños 😁!"
}

console.log(obtenerSaludo("Joseph", "León", 45))

/* Output:
   "¡Hola Joseph León, faltan 45 días para tu cumpleaños 😁!"
*/

Esridículamente 끔찍한 hacer todas esas concatenaciones para elaborar un pequeño saludo 😣; afortunadamente si usamos JavaScript Moderno podemos contar con nuestro querido 템플릿 문자열...

const obtenerSaludo = (nombre, apellido, diasParaCumpleaños) => {
   return `¡Hola ${nombre} ${apellido}, faltan ${diasParaCumpleaños} días para tu cumpleaños 😁!`
}

console.log(obtenerSaludo("Joseph", "León", 45))

/* Output:
   "¡Hola Joseph León, faltan 45 días para tu cumpleaños 😁!"
*/

¿ 그랑 디페렌시아를 노타스? No solamente nuestro codigo es mas simple de escribir, sino también es mucho más 가독성. Para usar esta característica debemos tener en cueenta lo siguiente:

No servirá si utilizas ' o ", debes utilizar las tildes invertidas.

Para inyectar un dato en tu plantilla de texto debes utilizar ${} colocando el dato dentro de las llaves.

Ahora Imaginemos que el requerimiento cambias así:

La aplicación debe saludar cordialmente al usuario por su nombre, apellido, y en la siguiente línea indicar cuántos días faltan para su cumpleaños restando un día.

죄 템플릿 문자열...

const obtenerSaludo = (nombre, apellido, diasParaCumpleaños) => {
   return "¡Hola " + nombre + " " + apellido + ". \n Faltan " + (diasParaCumpleaños - 1) + " días para tu cumpleaños 😁!"
}

console.log(obtenerSaludo("Joseph", "León", 45))

/* Output:
   "¡Hola Joseph León.
   Faltan 44 días para tu cumpleaños 😁!"
*/

아! pero con 템플릿 문자열...

const obtenerSaludo = (nombre, apellido, diasParaCumpleaños) => {
   return `¡Hola ${nombre} ${apellido}.
           Faltan ${diasParaCumpleaños - 1} días para tu cumpleaños 😁!`
}

console.log(obtenerSaludo("Joseph", "León", 45))

/* Output:
   "¡Hola Joseph León.
   Faltan 44 días para tu cumpleaños 😁!"
*/

Como ya nostaste, 템플릿 문자열 soporta:

Saltos de línea.

변수에 대한 조작, 명시적 값에 대한 상수 또는 값.

일반적으로 JavaScript를 표현합니다.

결론

concatenes con cadenas de texto con이 없습니다+.

Utiliza ' o " para textos estáticos.

Template string no solo te ayuda a ti, sino al que tenga que leer tu codigo.