{"id":6979,"date":"2017-12-21T15:01:04","date_gmt":"2017-12-21T13:01:04","guid":{"rendered":"https:\/\/www.espai.es\/blog\/?p=6979"},"modified":"2021-09-13T20:48:22","modified_gmt":"2021-09-13T18:48:22","slug":"plantillas-de-cadena-de-texto-en-javascript","status":"publish","type":"post","link":"https:\/\/www.espai.es\/blog\/2017\/12\/plantillas-de-cadena-de-texto-en-javascript\/","title":{"rendered":"Plantillas de cadena de texto en JavaScript"},"content":{"rendered":"

Se acerca el final del a\u00f1o y uno, que gusta mucho de explorar\u00a0las novedades en el mundo de la programaci\u00f3n Web, no puede evitar preguntarse que novedades nos\u00a0llegar\u00e1n el pr\u00f3ximo a\u00f1o al mundo de la programaci\u00f3n Web. Sin embargo, el problema de las novedades en el mundo Web, es que suele ser necesario esperar un cierto periodo de tiempo antes de aventurarse a utilizar ciertas cosas en entornos en producci\u00f3n. En el art\u00edculo de hoy, quiero mostraros como funcionan las plantillas de cadena de texto<\/strong> (template literals) que fueron introducidas en las versiones ES6\/ES2015 de JavaScript\/ECMAScript<\/a>, y publicadas en Junio de 2015 (hace apenas dos a\u00f1itos y medio).<\/p>\n

Esta nueva funcionalidad del lenguaje, esta previsto que en la nueva versi\u00f3n del pr\u00f3ximo a\u00f1o (ES2018) reciba algunas mejoras<\/a>, aunque a\u00fan queda tiempo para que estas mejoras est\u00e9n completamente soportadas. De paso, aprenderemos tambi\u00e9n el funcionamiento de otras dos novedades de ES2015, concretamente, el operador spread<\/strong> y los parametros rest<\/strong>.<\/p>\n

\u00bfCu\u00e1l es el soporte de las plantillas de cadena de texto en los navegadores?<\/h2>\n

En este enlace de canisue<\/a>, podemos ver que el soporte es bastante aceptable. Siendo la excepci\u00f3n el navegador obsoleto Internet Explorer<\/strong>, y los navegadores para m\u00f3viles Opera Mini<\/strong> y UC Browser<\/strong> (este \u00faltimo con fuerte presencia en China).<\/p>\n

As\u00ed que, excepto en el caso de que tengamos previsto un n\u00famero importante de visitas por parte de usuarios Chinos, no es descabellado empezar a utilizar estas plantillas de cadena de texto<\/strong>\u00a0en nuestros proyectos Web.<\/p>\n

\u00bfQu\u00e9 nos ofrecen las plantillas de cadena de texto?<\/h2>\n

En realidad no nos ofrecen nada nuevo, pero si van a permitirnos un c\u00f3digo mucho m\u00e1s limpio<\/strong>, ya que esta nueva caracter\u00edstica viene a suplir dos de las carencias m\u00e1s importantes de JavaScript a la hora de trabajar con cadenas de texto (sobretodo, a la hora de generar c\u00f3digo HTML); con las plantillas de cadena de texto, podremos concatenar textos y escribir en varias l\u00edneas de forma m\u00e1s limpia<\/strong>.<\/p>\n

\u00bfC\u00f3mo funcionan las plantillas de cadena de texto?<\/h2>\n

Normalmente para escribir una cadena de texto en JavaScript utilizamos las comillas simples o dobles. Para usar las plantillas de cadena de texto, deberemos de escribir la cadena de texto utilizando la tilde invertida<\/strong> o acento grave<\/strong>.<\/p>\n

Para concatenar texto, dentro de una plantilla de cadena de texto podemos introducir lo que se conoce como marcador<\/strong>, que es una posici\u00f3n del texto que ser\u00e1 reemplazada por el contenido de una expresi\u00f3n. Para escribir un marcador usaremos esta sintaxis: ${expresi\u00f3n}.<\/p>\n

Para utilizar m\u00faltiples l\u00edneas de texto, simplemente escribiremos el texto usando m\u00faltiples l\u00edneas (as\u00ed de f\u00e1cil).<\/p>\n

Si suena todo muy confuso, no os preocup\u00e9is,\u00a0en los siguientes ejemplos os quedar\u00e1 todo mucho m\u00e1s claro.<\/p>\n

\r\n\/\/ ejemplo normal de multilinea\r\nconsole.log("Ejemplo normal\\nmultilinea.");\r\n\/\/ ejemplo con plantillas de cadena de texto\r\nconsole.log(`Ejemplo de multilinea con\r\nplantillas de cadena de texto.`);\r\n<\/pre>\n
Tal y como se puede observar en este primer ejemplo, tradicionalmente, en JavaScript hemos tenido que usar la secuencia de escape \\n<\/strong> para \u00abromper\u00bb una cadena en varias l\u00edneas. Con las plantillas de cadena de texto, tal y como se puede observar en el ejemplo, ya no es necesario. Tan solo tenemos que usar el acento grave en lugar de las comillas simples o dobles y escribir dentro el texto\u00a0tal y como lo queremos.<\/p>\n
Veamos otro ejemplo donde se puede ver mejor la utilidad de las plantillas de cadena de texto. Esta vez, adem\u00e1s de texto multilinea, vamos a usar los marcadores de posici\u00f3n<\/strong>.<\/p>\n
\r\nvar peliculas = [\r\n  { nombre: "Avalon", anyo: "2001" },\r\n  { nombre: "The Sky Crawlers", anyo: "2008" },\r\n  { nombre: "Ghost in the Shell", anyo: "1995" },\r\n  { nombre: "Patlabor 2", anyo: "1993" }\r\n];\r\nvar tabla = `<table border="1">\r\n  <tr>\r\n    <th>Pel\u00edcula<\/th>\r\n    <th>A\u00f1o<\/th>\r\n  <\/tr>`;\r\nfor (var i=0;i<peliculas.length;i++) {\r\ntabla += `\r\n  <tr>\r\n    <td>${peliculas[i].nombre}<\/td>\r\n    <td>${peliculas[i].anyo}<\/td>\r\n  <\/tr>`;\r\n}\r\ntabla += `\r\n<\/table>`;\r\ndocument.write(tabla);\r\nconsole.log(tabla);\r\n<\/pre>\n
\"Plantillas<\/p>\n
Lo bonito de la forma de escribir este c\u00f3digo, no es solo que es m\u00e1s claro y limpio que usando la forma cl\u00e1sica de concatenar strings (con el s\u00edmbolo +), sino que adem\u00e1s, el c\u00f3digo HTML generado va a respetar los saltos de l\u00ednea y los espacios que hemos utilizado<\/strong>. Por lo que el c\u00f3digo generado va a ser un c\u00f3digo muy limpio y f\u00e1cil de leer, tal y como puedes\u00a0observar en la consola del navegador tras ejecutar el c\u00f3digo.<\/p>\n
Como ya se ha comentado, dentro del marcador podemos indicar una expresi\u00f3n, por lo que no es necesario que sea una simple variable;\u00a0podemos hacer cosas como la siguiente:<\/p>\n
console.log(`Dos m\u00e1s dos es igual a ${2+2}`);<\/pre>\n
Existe la posibilidad de un uso m\u00e1s avanzado, pero antes es necesario que os explique otro par de las novedades que nos trajo ES2015.<\/p>\n
El operador spread y los parametros rest<\/h2>\n
El operador spread<\/strong>, b\u00e1sicamente lo que hace es coger los elementos de un array y colocarlos separados por comas.<\/p>\n
El ejemplo cl\u00e1sico se puede ver con las funciones max o min del objeto Math. Estas funciones devuelven, respectivamente, el n\u00famero m\u00e1s alto o el n\u00famero m\u00e1s bajo de todos aquellos n\u00fameros que pasemos por par\u00e1metro. Es importante destacar que no le podemos pasar directamente un array a esta funci\u00f3n, pero con el operador spread si que podemos hacerlo. De nuevo, con un ejemplo quedar\u00e1 todo m\u00e1s claro:<\/p>\n
\r\n\/\/ ejemplo de uso del m\u00e9todo max\r\nconsole.log(Math.max(4,10,2));\r\n\/\/ si intentamos usar un array no funciona\r\nvar a = [4,10,2];\r\nconsole.log(Math.max(a));\r\n\/\/ ...a no ser que usemos el operador spread\r\nconsole.log(Math.max(...a));\r\n<\/pre>\n
Tal y como se puede observar en el ejemplo, el operador spread consiste en colocar tres puntos antes del array<\/strong>. Tiene muchos usos; veamos otro ejemplo de como copiar y concatenar arrays con el operador spread:<\/p>\n
\r\nvar a = [1,2,3];\r\nvar b = [4,5,6];\r\nvar x = a; \/\/ x no es una copia de a, es una referencia al mismo array\r\nvar y = [...a]; \/\/ y ser\u00e1 una copia de a, es otro array diferente\r\nvar z = [...a, ...b]; \/\/ z nuevo array concatenando a y b\r\n<\/pre>\n
Como pod\u00e9is ver, es bastante f\u00e1cil. Tan solo ten\u00e9is que imaginar, que en lugar de los tres puntos y el nombre del array, tenemos todos los\u00a0elemento\u00a0del array separados por comas.<\/p>\n
Los par\u00e1metros rest<\/strong> son muy similares, pero funcionan b\u00e1sicamente al rev\u00e9s que el operador spread. Como su nombre indica, son par\u00e1metros de una funci\u00f3n. Con un ejemplo nos quedar\u00e1 m\u00e1s que claro.<\/p>\n
\r\nfunction ejemplo(...numeros) {\r\n  for (var i=0;i<numeros.length;i++) {\r\n    console.log(numeros[i]);\r\n  }\r\n};\r\nejemplo(1,2,3,4,5,6);\r\n<\/pre>\n
Tal y como se puede ver en el ejemplo, el par\u00e1metro rest se indica con tres puntos antes del nombre del par\u00e1metro<\/strong>. Al invocar la funci\u00f3n, lo hacemos separando los elementos del futuro array separados por coma, pero dentro de la funci\u00f3n, lo que obtenemos es un array. Una vez entendido el operador spread, es sencillo, \u00bfno?<\/p>\n
Volvamos a las plantillas de cadena de texto<\/p>\n
Plantillas de cadena de texto con postprocesador<\/h2>\n
Para esta funcionalidad (tagged template literals) de las plantillas de cadenas de texto, hemos de definir una funci\u00f3n con dos par\u00e1metros<\/strong>. El primero es un array normal que contendr\u00e1\u00a0todos los fragmentos de texto de la plantilla (un elemento del array por cada\u00a0trozo\u00a0de texto que hay entre los marcadores). El segundo, es un par\u00e1metro rest<\/strong> que contendr\u00e1 los valores de cada marcador de la plantilla.<\/p>\n
Lo mejor, como siempre, es ver un ejemplo:<\/p>\n
\r\nfunction negrita(strings, ...values) {\r\n  var s = "";\r\n  for (var i=0;i<strings.length;i++) {\r\n    s += strings[i];\r\n    if (values[i]) {\r\n      s += "<b>" + (values[i] || '') + "<\/b>";\r\n    }\r\n  }\r\n  return s;\r\n}\r\nconsole.log(negrita`Dos m\u00e1s dos es ${2+2}.`);\r\nconsole.log(negrita`Uno m\u00e1s uno es ${1+1} y dos m\u00e1s dos son ${2+2}.`);\r\n<\/pre>\n
El el primer console log el texto de la plantilla ha sido dividido en dos fragmentos (el que hay antes del marcador y el que hay despu\u00e9s), as\u00ed que en el array strings tendremos dos elementos. Como solo tenemos un valor (un marcador) tenemos que controlar dicha situaci\u00f3n en el c\u00f3digo de la funci\u00f3n. En el segundo console log, tenemos tres fragmentos de texto entre los marcadores, y dos valores (uno por marcador).<\/p>\n
Esta forma de trabajar nos dar\u00e1 total libertad de definir exactamente como se ha de construir nuestra plantilla<\/strong>. \u00bfY para que nos puede servir esto? Pues, por ejemplo, para a\u00f1adir una clase que pinte de color rojo un importe solo si el valor es negativo.<\/p>\n
\r\nfunction valorNeg(strings, ...values) {\r\n  var s = "";\r\n  for (var i=0;i<strings.length;i++) {\r\n    s += strings[i];\r\n    if (values[i]) {\r\n      if (parseFloat(values[i]) < 0) {\r\n        s += "<span class='red'>" + (values[i] || '') + "<\/span>";\r\n      } else {\r\n        s += "<b>" + (values[i] || '') + "<\/b>";\r\n      }\r\n    }\r\n  }\r\n  return s;\r\n}\r\nconsole.log(valorNeg`Importe positivo: ${123}.`);\r\nconsole.log(valorNeg`Importe negativo: ${-123}.`);\r\n<\/pre>\n
\u00bfQu\u00e9 nos\u00a0deparar\u00e1 JavaScript el pr\u00f3ximo a\u00f1o con la versi\u00f3n ES2018?<\/h2>\n
Probablemente hasta Junio no lo sabremos con certeza, pero si tienes curiosidad, en este art\u00edculo<\/a> se discuten algunas de las posibles novedades de ES2018. Salga lo que salga, desafortunadamente, tendremos que esperar otro par de a\u00f1os a que los navegadores incorporen dichas novedades.<\/p>\n
Espero que el post haya sido interesante para vosotros, un saludo!<\/p>\n
 <\/p>\n","protected":false},"excerpt":{"rendered":"
Se acerca el final del a\u00f1o y uno, que gusta mucho de explorar\u00a0las novedades en el mundo de la programaci\u00f3n Web, no puede evitar preguntarse que novedades nos\u00a0llegar\u00e1n el pr\u00f3ximo a\u00f1o al mundo de la programaci\u00f3n Web. Sin embargo, el problema de las novedades en…<\/p>\n","protected":false},"author":23,"featured_media":7008,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_ef_editorial_meta_date_first-draft-date":"","_ef_editorial_meta_paragraph_assignment":"","_ef_editorial_meta_checkbox_needs-photo":"","_ef_editorial_meta_number_word-count":"","_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[7,5],"tags":[595,253],"class_list":["post-6979","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-diseno-web","category-programacion","tag-es2015","tag-javascript"],"yoast_head":"\nPlantillas de cadena de texto en JavaScript - Blog Escola Espai<\/title>\n<meta name=\"description\" content=\"En este art\u00edculo veremos como funcionan algunas de las novedades de ES2015; las plantillas de cadena de texto, el operador spread y los parametros rest.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.espai.es\/blog\/2017\/12\/plantillas-de-cadena-de-texto-en-javascript\/\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Plantillas de cadena de texto en JavaScript - Blog Escola Espai\" \/>\n<meta property=\"og:description\" content=\"En este art\u00edculo veremos como funcionan algunas de las novedades de ES2015; las plantillas de cadena de texto, el operador spread y los parametros rest.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.espai.es\/blog\/2017\/12\/plantillas-de-cadena-de-texto-en-javascript\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog Escola Espai\" \/>\n<meta property=\"article:published_time\" content=\"2017-12-21T13:01:04+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-09-13T18:48:22+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2017\/12\/plantillas-de-cadena-de-texto-cover.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"360\" \/>\n\t<meta property=\"og:image:height\" content=\"240\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Abel Camarena\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Abel Camarena\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data2\" content=\"8 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.espai.es\/blog\/2017\/12\/plantillas-de-cadena-de-texto-en-javascript\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.espai.es\/blog\/2017\/12\/plantillas-de-cadena-de-texto-en-javascript\/\"},\"author\":{\"name\":\"Abel Camarena\",\"@id\":\"https:\/\/www.espai.es\/blog\/#\/schema\/person\/b2d40404b9d987e3586e186c021ef897\"},\"headline\":\"Plantillas de cadena de texto en JavaScript\",\"datePublished\":\"2017-12-21T13:01:04+00:00\",\"dateModified\":\"2021-09-13T18:48:22+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.espai.es\/blog\/2017\/12\/plantillas-de-cadena-de-texto-en-javascript\/\"},\"wordCount\":1307,\"commentCount\":0,\"image\":{\"@id\":\"https:\/\/www.espai.es\/blog\/2017\/12\/plantillas-de-cadena-de-texto-en-javascript\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2017\/12\/plantillas-de-cadena-de-texto-cover.jpg\",\"keywords\":[\"ES2015\",\"javascript\"],\"articleSection\":[\"Dise\u00f1o Web\",\"Programaci\u00f3n\"],\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.espai.es\/blog\/2017\/12\/plantillas-de-cadena-de-texto-en-javascript\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.espai.es\/blog\/2017\/12\/plantillas-de-cadena-de-texto-en-javascript\/\",\"url\":\"https:\/\/www.espai.es\/blog\/2017\/12\/plantillas-de-cadena-de-texto-en-javascript\/\",\"name\":\"Plantillas de cadena de texto en JavaScript - Blog Escola Espai\",\"isPartOf\":{\"@id\":\"https:\/\/www.espai.es\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.espai.es\/blog\/2017\/12\/plantillas-de-cadena-de-texto-en-javascript\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.espai.es\/blog\/2017\/12\/plantillas-de-cadena-de-texto-en-javascript\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2017\/12\/plantillas-de-cadena-de-texto-cover.jpg\",\"datePublished\":\"2017-12-21T13:01:04+00:00\",\"dateModified\":\"2021-09-13T18:48:22+00:00\",\"author\":{\"@id\":\"https:\/\/www.espai.es\/blog\/#\/schema\/person\/b2d40404b9d987e3586e186c021ef897\"},\"description\":\"En este art\u00edculo veremos como funcionan algunas de las novedades de ES2015; las plantillas de cadena de texto, el operador spread y los parametros rest.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.espai.es\/blog\/2017\/12\/plantillas-de-cadena-de-texto-en-javascript\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.espai.es\/blog\/2017\/12\/plantillas-de-cadena-de-texto-en-javascript\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/www.espai.es\/blog\/2017\/12\/plantillas-de-cadena-de-texto-en-javascript\/#primaryimage\",\"url\":\"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2017\/12\/plantillas-de-cadena-de-texto-cover.jpg\",\"contentUrl\":\"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2017\/12\/plantillas-de-cadena-de-texto-cover.jpg\",\"width\":360,\"height\":240,\"caption\":\"Plantillas de cadena de texto en JavaScript\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.espai.es\/blog\/2017\/12\/plantillas-de-cadena-de-texto-en-javascript\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Portada\",\"item\":\"https:\/\/www.espai.es\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Plantillas de cadena de texto en JavaScript\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.espai.es\/blog\/#website\",\"url\":\"https:\/\/www.espai.es\/blog\/\",\"name\":\"Blog Escola Espai\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.espai.es\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.espai.es\/blog\/#\/schema\/person\/b2d40404b9d987e3586e186c021ef897\",\"name\":\"Abel Camarena\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/www.espai.es\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/035501b0f14e120b1a49121758e2056b8d589fc43b9d3c3ad3670a197a90dddf?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/035501b0f14e120b1a49121758e2056b8d589fc43b9d3c3ad3670a197a90dddf?s=96&d=mm&r=g\",\"caption\":\"Abel Camarena\"},\"sameAs\":[\"http:\/\/www.espai.es\"],\"url\":\"https:\/\/www.espai.es\/blog\/author\/abel\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Plantillas de cadena de texto en JavaScript - Blog Escola Espai","description":"En este art\u00edculo veremos como funcionan algunas de las novedades de ES2015; las plantillas de cadena de texto, el operador spread y los parametros rest.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.espai.es\/blog\/2017\/12\/plantillas-de-cadena-de-texto-en-javascript\/","og_locale":"es_ES","og_type":"article","og_title":"Plantillas de cadena de texto en JavaScript - Blog Escola Espai","og_description":"En este art\u00edculo veremos como funcionan algunas de las novedades de ES2015; las plantillas de cadena de texto, el operador spread y los parametros rest.","og_url":"https:\/\/www.espai.es\/blog\/2017\/12\/plantillas-de-cadena-de-texto-en-javascript\/","og_site_name":"Blog Escola Espai","article_published_time":"2017-12-21T13:01:04+00:00","article_modified_time":"2021-09-13T18:48:22+00:00","og_image":[{"width":360,"height":240,"url":"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2017\/12\/plantillas-de-cadena-de-texto-cover.jpg","type":"image\/jpeg"}],"author":"Abel Camarena","twitter_card":"summary_large_image","twitter_misc":{"Escrito por":"Abel Camarena","Tiempo de lectura":"8 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.espai.es\/blog\/2017\/12\/plantillas-de-cadena-de-texto-en-javascript\/#article","isPartOf":{"@id":"https:\/\/www.espai.es\/blog\/2017\/12\/plantillas-de-cadena-de-texto-en-javascript\/"},"author":{"name":"Abel Camarena","@id":"https:\/\/www.espai.es\/blog\/#\/schema\/person\/b2d40404b9d987e3586e186c021ef897"},"headline":"Plantillas de cadena de texto en JavaScript","datePublished":"2017-12-21T13:01:04+00:00","dateModified":"2021-09-13T18:48:22+00:00","mainEntityOfPage":{"@id":"https:\/\/www.espai.es\/blog\/2017\/12\/plantillas-de-cadena-de-texto-en-javascript\/"},"wordCount":1307,"commentCount":0,"image":{"@id":"https:\/\/www.espai.es\/blog\/2017\/12\/plantillas-de-cadena-de-texto-en-javascript\/#primaryimage"},"thumbnailUrl":"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2017\/12\/plantillas-de-cadena-de-texto-cover.jpg","keywords":["ES2015","javascript"],"articleSection":["Dise\u00f1o Web","Programaci\u00f3n"],"inLanguage":"es","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.espai.es\/blog\/2017\/12\/plantillas-de-cadena-de-texto-en-javascript\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.espai.es\/blog\/2017\/12\/plantillas-de-cadena-de-texto-en-javascript\/","url":"https:\/\/www.espai.es\/blog\/2017\/12\/plantillas-de-cadena-de-texto-en-javascript\/","name":"Plantillas de cadena de texto en JavaScript - Blog Escola Espai","isPartOf":{"@id":"https:\/\/www.espai.es\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.espai.es\/blog\/2017\/12\/plantillas-de-cadena-de-texto-en-javascript\/#primaryimage"},"image":{"@id":"https:\/\/www.espai.es\/blog\/2017\/12\/plantillas-de-cadena-de-texto-en-javascript\/#primaryimage"},"thumbnailUrl":"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2017\/12\/plantillas-de-cadena-de-texto-cover.jpg","datePublished":"2017-12-21T13:01:04+00:00","dateModified":"2021-09-13T18:48:22+00:00","author":{"@id":"https:\/\/www.espai.es\/blog\/#\/schema\/person\/b2d40404b9d987e3586e186c021ef897"},"description":"En este art\u00edculo veremos como funcionan algunas de las novedades de ES2015; las plantillas de cadena de texto, el operador spread y los parametros rest.","breadcrumb":{"@id":"https:\/\/www.espai.es\/blog\/2017\/12\/plantillas-de-cadena-de-texto-en-javascript\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.espai.es\/blog\/2017\/12\/plantillas-de-cadena-de-texto-en-javascript\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.espai.es\/blog\/2017\/12\/plantillas-de-cadena-de-texto-en-javascript\/#primaryimage","url":"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2017\/12\/plantillas-de-cadena-de-texto-cover.jpg","contentUrl":"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2017\/12\/plantillas-de-cadena-de-texto-cover.jpg","width":360,"height":240,"caption":"Plantillas de cadena de texto en JavaScript"},{"@type":"BreadcrumbList","@id":"https:\/\/www.espai.es\/blog\/2017\/12\/plantillas-de-cadena-de-texto-en-javascript\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Portada","item":"https:\/\/www.espai.es\/blog\/"},{"@type":"ListItem","position":2,"name":"Plantillas de cadena de texto en JavaScript"}]},{"@type":"WebSite","@id":"https:\/\/www.espai.es\/blog\/#website","url":"https:\/\/www.espai.es\/blog\/","name":"Blog Escola Espai","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.espai.es\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":"Person","@id":"https:\/\/www.espai.es\/blog\/#\/schema\/person\/b2d40404b9d987e3586e186c021ef897","name":"Abel Camarena","image":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.espai.es\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/035501b0f14e120b1a49121758e2056b8d589fc43b9d3c3ad3670a197a90dddf?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/035501b0f14e120b1a49121758e2056b8d589fc43b9d3c3ad3670a197a90dddf?s=96&d=mm&r=g","caption":"Abel Camarena"},"sameAs":["http:\/\/www.espai.es"],"url":"https:\/\/www.espai.es\/blog\/author\/abel\/"}]}},"jetpack_featured_media_url":"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2017\/12\/plantillas-de-cadena-de-texto-cover.jpg","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/posts\/6979","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/users\/23"}],"replies":[{"embeddable":true,"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/comments?post=6979"}],"version-history":[{"count":32,"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/posts\/6979\/revisions"}],"predecessor-version":[{"id":12285,"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/posts\/6979\/revisions\/12285"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/media\/7008"}],"wp:attachment":[{"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/media?parent=6979"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/categories?post=6979"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/tags?post=6979"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}