ES6: strings

Like si también te preguntas que pasó con el archivo 02

Like si disfrutas ya no tener que usar punto y coma al finalizar una sentencia 👀

Template literals (backticks) son un game-changer sin este feature no existirían cosas como JSX y consigo todo lo que usamos en el frontend moderno, sin duda una las mejores implementaciones que se hicieron en el lenguaje.

cuando te dicen que los templates literals no son necesarios

Hola Chic@s 😃:
ES6

• STRINGS

let hello = "hello";
let world = "world";
let epicPhrase = hello + " " + world + "!";
console.log(epicPhrase)

// Template  literals
let epicPhrase2 = `${hello} ${world}!`;
console.log(epicPhrase2)

// Multi-line strings

let loren = "esto es un string \n" + "esto es otra linea";

let loren2 = `Esta es una frase epica
la continuacion de esa frase epica.
`;

console.log(loren);
console.log(loren2);

En mi caso las comillas las uso con alt + 96.

quieren escuchar al Oscar Barajas borracho?? pongan la velocidad del video a 0.5x😂

¡Hola tú!

He visto que en algunos comentarios algunas personas se sienten maravilladas con no tener que usar ; en JavaScript, ¡efectivamente no es obligatorio! Pero si te lo recomiendo MUCHO, te voy a dejar el siguiente codigo:

const persona = {
  nombre: 'Alvaro',
  apellido: 'Garzón'
}

['Manzana', 'Naranja', 'Pera'].forEach((fruta) => {
  console.log(`${persona.nombre} ${persona.apellido} comió ${fruta}`);
})

¿Ves algo raro en él?

Yo no veo nada raro, un objeto literal, un array que se le aplica el método forEach en el que itera cada uno de los elementos del array dentro de una arrow function… Pues tiene como que buena pinta… ¿O no?

Por favor

Copialo y pegalo en tu editor de texto y cuéntame respondiendo este aporte que sucede cuando lo ejecutas así, sin ; y cuéntame que sucede si dejas un ; justo después de crear el objeto, es decir, en la línea 4 después de cerrar la llave, es decir, };.

¿Te arrojó un error?

Una vez pasé toda una tarde intentando saber porque me daba un error un código, pues… adivina, no usaba punto y coma, me corría la mayoría pero llegué al punto en el que no me corría ya el código y estaba loco buscando la respuesta, me dio por usar prettier y esta extensión le añadió el punto y coma… WOALA, funcionó, así que te recomiendo que si uses el punto y coma.

¡Gracias por leer!

Excelente, las plantillas literales permiten entonces incluir codigo HTML de forma mas sencilla

let banner = `
<div class="banner">
	<img src="img/banner-01.jpg>
	<a class="btn">ingresar</a>
</div>
`;

En Kotlin por ejemplo se consigue el multi line con la triple comilla doble:
""“
Hola
Mundo
”""

ES6: Strings

En ES6 también se implementaron los template strings o comillas francesas con las cuales podemos interpolar valores más fácil y más clara, para el ejemplo haremos 2 variables 1 con el string de hello y la otra con world lo hacemos así

const hello = 'hello';
const world = 'world';
const newValue = `${hello} ${world}!`;

De esta forma podemos unir strings más fácil como ves su sintaxis es la siguiente, estas comillas las sacas dependiendo de tu teclado o sistema operativo

en mi ordenador se sacan con ctrl + alt + }

`  `

Después de esto tenemos que usar el signo de pesos “$” y entre llaves pasamos el valor

` ${valor}  `

Una de las ventajas de los templates strings es la capacidad de poder dar saltos de linea

`hola 
esto 
es un
string`

1. Yo sigo colocando el ; jejejeje
2. Yo quiero ese mouse!!!
3. Me gusta mucho que este curso este actualizado y este conectando tanto con uno anterior (lo acabo de tomar) que es de closures y scope

en la ultima frase creo que era linea profe no liena

Resumen: Concatenación y Multilíneas

Concatenación

A partir de ecmascript 6 vamos a poder concatenar de forma más amigable.

forma clásica:

let hello = "Hello"
let world = "World"

let fraseConcatenada = hello + " " * world;

console.log(fraseConcatenada);
// "Hello World"

Sin embargo con los template literals nos quedaría de la siguiente manera;

let hello = "Hello"
let world = "World"

let fraseConcatenadaES6 = `${hello} ${word}!`;

console.log(fraseConcatenadaES6);
// "Hello World!"

Multi-líneas

La forma clásica de hacer las multi-líneas era asi:

let lorem = "Esto es una linea de texto \n" + "Esta es otra línea";
console.log(lorem);

// "Esto es una linea de texto 
// Esta es otra línea"

Con la nueva forma propuesta en ES6 las multilíneas quedarían así

let lorem = `Esta es una línea de texto
y esta es otra línea.`;
console.log(lorem);

// "Esta es una linea de texto 
// y esta es otra línea"

📒 Archivos del Proyecto 📒

Pasos 📌

• • Dentro de la carpeta es6, se crea el archivo: 03-strings.js
  • • ◦ El código de los ejercicios:

//Compilar: seleccionar el código + click derecho + Run Code

//Ejercicio #1
let hello = 'Hello';
let world = 'World';
let epicPhrase = hello + ' ' + world + '!';

console.log(epicPhrase);

//output: Hello World!

//Ejercicio #2
//Template literals
let epicPhrase2 = `${hello} ${world}!`;
console.log(epicPhrase2);

//output: Hello World!

//Ejercicio #3
//Multi-line strings
let lorem = 'esto es un string \n ' + 'esto es otra línea';

let lorem2 = `Esta es una frase epica
	la continuacion de esa frase epica`
;

console.log(lorem);
console.log(lorem2);

/*output:
esto es un string
esto es otra línea
Esta es una frase epica
la continuacion de esa frase epica
*/

Tenía dudas de porque el tema de Palenight no coincidía con el del profe, y resulta que esta usando SynthWave '84 xd.

aún no sabia que con \n se hacia salto de línea hahaha

Apunte | Notion

URL: https://pogolo.notion.site/5-ES6-strings-e61e60ab4558427899772c92469c2e38

🦄✨

Lo que nos mencionaba Oscar son los llamados caracteres de secuencia
Estos solían ser muy usados en aplicaciones de consola y no necesariamente necesitan concatenarse con otro string cuando se hace uso del mismo. Por ejemplo, en el código que usamos en la clase se podía hacer de la siguiente manera:

let lorem = 'String de prueba.\nY acabo de hacer un salto de línea';

Y de igual manera, el salto de línea se tomará en cuenta.
A continuación, te dejo algunos de los caracteres de secuencia que solían ser usados :3

si tiene sentido que comillas diferentes cumplan funciones distintas, había solo era una forma diferente de escribir el código

No sabía lo del salto de línea con templates literals. 👍👍

• Dentro de las comillas francesas, para separar un string en varias líneas solo nesecitamos dar enter.

Aprendemos a usar templates literals, es un forma mas sencilla de concatenar y de facil lectura.

Aprendemos a usar templates literals, es un forma mas sencilla de concatenar y de facil lectura.

Aprendemos a usar templates literals, es un forma mas sencilla de concatenar y de facil lectura.

Aprendemos a usar templates literals, es un forma mas sencilla de concatenar y de facil lectura.

Aprendemos a usar templates literals, es un forma mas sencilla de concatenar y de facil lectura.

Aprendemos a usar templates literals, es un forma mas sencilla de concatenar y de facil lectura.

Aprendemos a usar templates literals, es un forma mas sencilla de concatenar y de facil lectura.

Aprendemos a usar templates literals, es un forma mas sencilla de concatenar y de facil lectura

Aprendemos a usar templates literals, es un forma mas sencilla de concatenar y de facil lectura

Aprendemos a usar templates literals, es un forma mas sencilla de concatenar y de facil lectura

Aprendemos a usar templates literals, es un forma mas sencilla de concatenar y de facil lectura

Aprendemos a usar templates literals, es un forma mas sencilla de concatenar y de facil lectura

Aprendemos a usar templates literals, es un forma mas sencilla de concatenar y de facil lectura

Aprendemos a usar templates literals, es un forma mas sencilla de concatenar y de facil lectura

Aprendemos a usar templates literals, es un forma mas sencilla de concatenar y de facil lectura

Aprendemos a usar templates literals, es un forma mas sencilla de concatenar y de facil lectura

Ejemplo de uso de los template literal y de las arrow function

const saludar = (nombre) =>{
console.log(Hola como estas ${nombre});
}

saludar(‘Jesus’);

Por cierto sí usan ( alt + 96 ) pueden hacer las comillas francesas ( backtick como yo la conozco )

Super

estará todos los codigos del curso en hit hub

También se puede usar el \n sin necesidad de concatenar usando los backticks

let lorem3 = `Mi linea 1 \nMi linea 2`

Waos ahora si quiero a los Template Literals ❤️

Comillas invertidas o francesas. Alt + 96.

Ya veo como se habrán sentido los frontend devs luego del EC6 en el 2015.

** 5/35 ES6: strings**
Las plantillas literales son una característica de JavaScript introducida en ES6 que permite crear cadenas de caracteres que contengan variables sin necesidad de utilizar la concatenación de caracteres. Esta característica mejora la legibilidad y manejabilidad del código.

Para utilziar plantillas literales, se emplea el caracter acentro grave ( ‘ ) en lugar de comillas simples o dobles para envolver el mensaje y se utilizar la sintaxis $(variable) para incluir en el mensaje.

Además, se puede utilziar plantillas multilinea para crear mensajes con varias líneas separadas entre sí sin necesidad de agregar /n al string.

Por ejemplo, antes de las plantillas literales, para crear una cadena larga o un mensaje elaborado que contenga variables, se utilizaba la concatenación de carcteres, lo cual se hacía cada vez más complejo en mensajes más extensos o al tener que agregar espacios antes o después de cada variable concatenada.

Ejemplo de concatenación de caracteres sin plantilla litreal:

var nombre = "Juan";
var edad = 30;
var ciudad = "Bogotá";

var mensaje = "Mi nombre es " + nombre + ", tengo " + edad + 
" años y vivo en " + ciudad + ".";
console.log(mensaje);
// 'Mi nombre es Juan, tengo 30 años y vivo en Bogotá.'

Con plantillas literales, el mismo mensaje se puede crear de la siguiente manera;

const nombre = "Juan";
const edad = 30;
const ciudad = "Bogotá";

const mensaje = `Mi nombre es ${nombre}, 
tengo ${edad} años y vivo en ${ciudad}.`;
console.log(mensaje);
// 'Mi nombre es Juan, tengo 30 años y vivo en Bogotá.'

Otro ejemplo es crear una plantilla multilinea. Anres de ES6, la forma de hacerlo era agregar /n al string

var mensaje = "Este es un ejemplo de\n"
+ "plantilla multilínea.\n"
+ "Puede resultar confuso.";

console.log(mensaje);
// 'Este es un ejemplo de
// plantilla multilínea.
// Puede resultar confuso.'

Con plantillas literales, se puede crear la misma plantilla multilínea de la siguiente manera.

const mensaje = `Este es un ejemplo de
plantilla multilínea.
Puede resultar confuso.`;

console.log(mensaje);
// 'Este es un ejemplo de
// plantilla multilínea.
// Puede resultar confuso.'

Les recominedo la extension Template String Converter en Visual Studio Code para que cuando escirban ${} automaticamente las comillas simples se conviertan en comillas francesas

se robaron el numero 2

los errores de tipo en VSC se pueden corregir renombrando la variable creo que es f12 o f2

TEMPLATE LITERALS AND MULTILINE

//TEMPLATE LITERALS
//We can concatenate sentences easier with template literals
let hello = 'hello';
let world = 'world';

let epicPhrase = hello + ' ' + world + '!';
console.log(epicPhrase);

let epicPhrase2 = `${hello} ${world}!`;
console.log(epicPhrase);

//MULTILINE
//Now we can jump a line without the need of a \n thanks to template literals
let phrase1 = "Hello World \n" + "This is another phrase";
console.log(phrase1);
let phrase2 = `Hello World
This is another phrase`;
console.log(phrase2);

Repositorio github del profe → Archivo manejado en la clase:

• 03-strings.js