Share
ES6 es el futuro de JavaScript y ya está aquí. Es una especificación terminada y aporta muchas características que requiere un lenguaje para mantenerse competitivo con las necesidades de la web de ahora. No todo en ES6 es para ti, y en esta pequeña serie de publicaciones mostraré características que son muy útiles y que ya están disponibles..
Si observa el código JavaScript que he escrito, encontrará que siempre uso comillas simples para definir cadenas en lugar de comillas dobles. JavaScript está bien con cualquiera de los dos siguientes ejemplos hacen exactamente lo mismo:
var animal = "vaca"; var animal = 'vaca';
La razón por la que prefiero las comillas simples es que, en primer lugar, facilita el ensamblaje de cadenas HTML con los atributos correctamente citados de esa manera:
// con comillas simples, no hay necesidad de // escapar de las comillas alrededor del valor de clase var pero = ''; // este es un error de sintaxis: var but = ""; // esto funciona: var pero ="";
La única vez que necesita escapar ahora es cuando utiliza una sola cita en su HTML, lo que debería ser una ocasión muy rara. Lo único en lo que puedo pensar es en JavaScript o CSS en línea, lo que significa que es muy probable que hagas algo sombrío o desesperado en tu marca. Incluso en tus textos, probablemente estés mejor si no usas una sola cita, sino la tipográficamente más agradable..
Aparte: por supuesto, HTML perdona lo suficiente como para omitir las comillas o usar comillas simples alrededor de un atributo, pero prefiero crear un marcado legible para los humanos en lugar de confiar en el perdón de un analizador. Hicimos que el analizador HTML5 perdonara porque la gente escribió un marcado marcado en el pasado, no como una excusa para seguir haciéndolo..
He sufrido lo suficiente en los días DHTML de document.write, creando un documento dentro de un conjunto de marcos en una nueva ventana emergente y otras abominaciones, para no querer usar el carácter de escape nunca más. A veces, necesitábamos el triple, y eso era incluso antes de que tuviéramos códigos de colores en nuestros editores. Fue un desastre.
Otra razón por la que prefiero las comillas simples es que escribí una gran cantidad de PHP en mi tiempo para sitios web muy grandes donde el rendimiento era muy importante. En PHP, hay una diferencia entre comillas simples y dobles. Las cadenas de comillas simples no tienen ninguna sustitución en ellas, mientras que las de comillas dobles sí las tienen. Eso significaba en los días de PHP 3 y 4 que el uso de comillas simples era mucho más rápido, ya que el analizador no tenía que pasar por la cadena para sustituir valores. Aquí hay un ejemplo de lo que eso significa:
El animal es $ animal y su sonido es $ sonido eco "El animal es $ animal y su sonido es $ sonido"; // => El animal es una vaca y su sonido es muuuuuuuuq?
JavaScript no tuvo esta sustitución, por lo que tuvimos que concatenar cadenas para lograr el mismo resultado. Esto es bastante difícil de manejar, ya que necesitas saltar y salir de las citas todo el tiempo.
Accentsconagua
var animal = 'vaca'; var sonido = 'moo'; alerta ('El animal es' + animal + 'y su sonido es' + sonido); // => "El animal es vaca y su sonido es moo"Esto se vuelve realmente desordenado con cadenas más largas y complejas, especialmente cuando ensamblamos una gran cantidad de HTML. Y lo más probable es que tarde o temprano terminará con su herramienta de alineación quejándose de los espacios en blanco finales después de un + al final de una línea. Esto se basa en el problema de que JavaScript no tiene cadenas multilínea:
// esto no funciona var list = '
Para solucionar el desorden que es el manejo de cadenas y la concatenación en JavaScript, hicimos lo que siempre hacemos: escribimos una biblioteca. Hay muchas bibliotecas de plantillas HTML, con Mustache.js que probablemente haya sido la seminal. Todos estos siguen su propia sintaxis no estandarizada y funcionan en ese estado de ánimo. Es un poco como decir que escribes tu contenido en Markdown y luego te das cuenta de que hay muchas ideas diferentes de lo que significa "Markdown"..
Con el advenimiento de ES6 y su estandarización, podemos regocijarnos porque JavaScript ahora tiene un nuevo chavo en el bloque cuando se trata de manejar cadenas: Cadenas de plantillas. El soporte de cadenas de plantillas en los navegadores actuales es alentador: Chrome 44+, Firefox 38+, Microsoft Edge y WebKit están todos a bordo. Safari, lamentablemente, no lo es, pero llegará..
El genio de las cadenas de plantillas es que utiliza un nuevo delimitador de cadenas, que no se usa en HTML ni en los textos normales: la marca de retroceso (').
Usando este, ahora tenemos sustitución de expresiones de cadena en JavaScript:
var animal = 'vaca'; var sonido = 'moo'; alerta ('El animal es $ animal y su sonido es $ sonido'); // => "El animal es vaca y su sonido es moo" los PS construct puede tomar cualquier expresión de JavaScript que devuelva un valor. Por ejemplo, puede hacer cálculos o acceder a las propiedades de un objeto:
var out = 'diez veces dos totalmente es $ 10 * 2'; // => "diez veces dos es totalmente 20" var animal = nombre: 'vaca', ilk: 'bovino', frente: 'moo', espalda: 'leche', alerta ('The $ animal.name es del $ animal.ilk ilk, un extremo es para el $ animal.front, el otro para el $ animal.back '); // => / * La vaca es de la especie bovina, un extremo es para el moo, el otro para la leche * / El último ejemplo también muestra que las cadenas de varias líneas ya no son un problema.
Otra cosa que puede hacer con las cadenas de plantilla es anteponerlas con una etiqueta, que es el nombre de una función que se llama y obtiene la cadena como un parámetro. Por ejemplo, podría codificar la cadena resultante para las URL sin tener que recurrir a la horriblemente nombrada encodeURIComponent todo el tiempo.
function urlify (str) return encodeURIComponent (str); urlify 'http://beedogs.com'; // => "http% 3A% 2F% 2Fbeedogs.com" urlify 'woah $ £ $%% ^ ^ "" = //>> woah% 24% C2% A3% 24% 25% C2% A3% 5E % 24% 22 "// el anidamiento también funciona: var str = 'foo $ urlify' && ' bar'; // =>" foo% 26% 26 bar "
Esto funciona, pero se basa en la coerción implícita de matriz a cadena. El parámetro enviado a la función no es una cadena, sino una matriz de cadenas y valores. Si se usa de la forma que muestro aquí, se convierte en una cadena por conveniencia, pero la forma correcta es acceder a los miembros de la matriz directamente.
Dentro de la función de etiqueta no solo puede obtener la cadena completa, sino también sus partes.
etiqueta de función (cadenas, valores) console.log (cadenas); console.log (valores); console.log (cadenas [1]); etiqueta 'you $ 3 + 4 it'; / * => Array ["you", "it"] 7 it * /
También hay una matriz de las cadenas en bruto que se le proporcionan, lo que significa que obtiene todos los caracteres de la cadena, incluidos los caracteres de control. Digamos, por ejemplo, que agrega un salto de línea con \norte. Obtendrá el doble espacio en blanco en la cadena, pero el \norte personajes en las cadenas en bruto:
etiqueta de función (cadenas, valores) console.log (cadenas); console.log (valores); console.log (cadenas [1]); console.log (string.raw [1]); etiqueta 'you $ 3 + 4 \ nit'; / * => Array ["you", "it"] 7 it \ nit * /
Las cadenas de plantillas son una de esas ingeniosas victorias en ES6 que se pueden usar en este momento. Si tiene que admitir navegadores más antiguos, puede, por supuesto, transferir su ES6 a ES5; puede realizar una prueba de características para el soporte de cadenas de plantillas utilizando una biblioteca como featuretests.io o con el siguiente código:
var templatestrings = falso; prueba nueva función ("'2 + 2'"); templatestrings = true; catch (err) templatestrings = false; if (templatestrings) //… Aquí hay algunos más artículos sobre cadenas de plantillas:
Este artículo forma parte de la serie de desarrollo web de los expertos en tecnología de Microsoft sobre aprendizaje práctico de JavaScript, proyectos de código abierto y mejores prácticas de interoperabilidad, incluido el navegador Microsoft Edge y el nuevo motor de renderizado EdgeHTML..
Lo alentamos a realizar pruebas en todos los navegadores y dispositivos, incluido Microsoft Edge, el navegador predeterminado para Windows 10, con herramientas gratuitas en dev.modern.IE:
Aprendizaje profundo de tecnología sobre Microsoft Edge y la plataforma web de nuestros ingenieros y evangelistas:
Más herramientas y recursos multiplataforma gratuitos para la plataforma web:
