diff options
Diffstat (limited to 'files/es/web/javascript/guide/text_formatting/index.html')
| -rw-r--r-- | files/es/web/javascript/guide/text_formatting/index.html | 254 |
1 files changed, 254 insertions, 0 deletions
diff --git a/files/es/web/javascript/guide/text_formatting/index.html b/files/es/web/javascript/guide/text_formatting/index.html new file mode 100644 index 0000000000..63a866024b --- /dev/null +++ b/files/es/web/javascript/guide/text_formatting/index.html @@ -0,0 +1,254 @@ +--- +title: Formato de texto +slug: Web/JavaScript/Guide/Text_formatting +tags: + - Guía + - JavaScript +translation_of: Web/JavaScript/Guide/Text_formatting +--- +<div>{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Numbers_and_dates", "Web/JavaScript/Guide/Regular_Expressions")}}</div> + +<p class="summary">Este capítulo presenta cómo trabajar con cadenas de caracteres (<code>String</code>) y texto en JavaScript.</p> + +<h2 id="Cadenas_de_caracteres_String">Cadenas de caracteres (<code>String</code>)</h2> + +<p>El tipo {{Glossary("String")}} de JavaScript se utiliza para representar datos textuales. Es un conjunto de "elementos" de valores enteros sin signo de 16 bits (unidades de código UTF-16). Cada elemento de la cadena de caracteres ocupa una posición en la cadena. El primer elemento está en el índice 0, el siguiente en el índice 1, y así sucesivamente. La longitud de una cadena es el número de elementos que contiene. Puedes crear cadenas utilizando cadena literales u objetos <strong>string</strong>.</p> + +<div class="hidden">PRECAUCIÓN: si editas esta página, no incluyas ningún caracter por encima de U+FFFF, hasta que se solucione el ({{bug(857438)}} de MDN).</div> + +<h3 id="Cadenas_literales">Cadenas literales</h3> + +<p>Puedes crear cadenas simples utilizando comillas simples o dobles:</p> + +<pre class="brush: js notranslate">'foo' +"bar"</pre> + +<p>Se pueden crear cadenas más avanzadas usando secuencias de escape:</p> + +<h4 id="Secuencias_de_escape_hexadecimales">Secuencias de escape hexadecimales</h4> + +<p>El número después de \x se interpreta como un número del {{Interwiki("wikipedia", "Sistema_hexadecimal")}}.</p> + +<pre class="brush: js notranslate">'\xA9' // "©" +</pre> + +<h4 id="Secuencias_de_escape_Unicode">Secuencias de escape Unicode</h4> + +<p>Las secuencias de escape Unicode requieren al menos cuatro dígitos hexadecimales después de <code>\u</code>.</p> + +<pre class="brush: js notranslate">'\u00A9' // "©"</pre> + +<h4 id="Puntos_de_escape_de_código_Unicode">Puntos de escape de código Unicode</h4> + +<p>Nuevo en ECMAScript 2015. Con el código de puntos de escape Unicode, cualquier carácter se puede escapar usando números hexadecimales para que sea posible usar puntos de código Unicode hasta <code>0x10FFFF</code>. Con simples escapes Unicode, a menudo es necesario escribir las mitades sustitutas por separado para lograr el mismo resultado.</p> + +<p>Consulta también {{JSxRef("String.fromCodePoint()")}} o {{JSxRef("String.prototype.codePointAt()")}}.</p> + +<pre class="brush: js notranslate">'\u{2F804}' + +// lo mismo con los escapes Unicode simples +'\uD87E\uDC04'</pre> + +<h3 id="Objetos_String">Objetos <code>String</code></h3> + +<p>El objeto {{JSxRef("String")}} es una envoltura alrededor del tipo de dato primitivo <code>string</code>.</p> + +<pre class="brush: js notranslate">const foo = new String('foo'); // Crea un objeto String +console.log(foo); // Muestra: <span><span>[String: 'foo']</span></span> +typeof foo; // Devuelve 'object' +</pre> + +<p>Puedes llamar a cualquiera de los métodos del objeto <code>String</code> en un valor de cadena literal: JavaScript automáticamente convierte la cadena literal en un objeto <code>String</code> temporal, llama al método y luego descarta el objeto <code>String</code> temporal. También puedes usar la propiedad <code>String.length</code> con una cadena literal:</p> + +<p>Debes usar cadenas literales a menos que necesites específicamente usar un objeto <code>String</code>, porque los objetos <code>String</code> pueden tener un comportamiento contrario a la intuición. Por ejemplo:</p> + +<pre class="brush: js notranslate">const firstString = '2 + 2'; // Crea un valor de cadena literal +const secondString = new String('2 + 2'); // Crea un objeto String +eval(firstString); // Devuelve el número 4 +eval(secondString); // Devuelve la cadena "2 + 2"</pre> + +<p>Un objeto <code>String</code> tiene una propiedad, <code>length</code>, que indica el número de unidades de código UTF-16 en la cadena. Por ejemplo, el siguiente código asigna a <code>helloLength</code> el valor 13, porque "¡Hola, mundo!" tiene 13 caracteres, cada uno representado por una unidad de código UTF-16. Puedes acceder a cada unidad de código utilizando la notación de corchete de los arreglos. No puedes cambiar caracteres individuales porque las cadenas son objetos inmutables similares a los arreglos:</p> + +<pre class="brush: js notranslate">const hello = '¡Hola, mundo!'; +const helloLength = hello.length; +hello[0] = 'L'; // Esto no tiene ningún efecto, porque las cadenas son inmutables +hello[1]; // Esto devuelve "H" +</pre> + +<p>Los caracteres cuyos valores escalares Unicode son mayores que U+FFFF (tal como algunos caracteres chinos/japoneses/coreanos/vietnamitas raros y algunos «emoji»s) se almacenan en UTF-16 con dos unidades de código sustituto cada uno. Por ejemplo, una cadena que contenga el caracter único U+1F600 "Cara sonriente de emoji" tendrá una longitud de 2. El acceso a las unidades de código individual en una cadena de este tipo utilizando corchetes puede tener consecuencias indeseables, como la formación de cadenas con diferentes unidades de código suplente, violando el estándar Unicode. (Se deben agregar ejemplos a esta página después de que se corrija el error MDN {{bug(857438)}}). Consulta también {{JSxRef("String.fromCodePoint()")}} o {{JSxRef("String.prototype.codePointAt()")}}.</p> + +<p>Un objeto <code>String</code> tiene una variedad de métodos: por ejemplo, aquellos que devuelven una variación de la cadena en sí, como <code>substring</code> y <code>toUpperCase</code>.</p> + +<p>La siguiente tabla resume los métodos de los objetos {{JSxRef("String")}}.</p> + +<table class="standard-table"> + <caption> + <h4 id="Métodos_de_String">Métodos de <code>String</code></h4> + </caption> + <thead> + <tr> + <th scope="col">Método</th> + <th scope="col">Descripción</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{JSxRef("String.charAt", "charAt")}}, {{JSxRef("String.charCodeAt", "charCodeAt")}}, {{JSxRef("String.codePointAt", "codePointAt")}}</td> + <td>Devuelve el caracter o código de caracter en la posición especificada en la cadena.</td> + </tr> + <tr> + <td>{{JSxRef("String.indexOf", "indexOf")}}, {{JSxRef("String.lastIndexOf", "lastIndexOf")}}</td> + <td>Devuelve la posición de la subcadena especificada en la cadena o la última posición de la subcadena especificada, respectivamente.</td> + </tr> + <tr> + <td>{{JSxRef("String.startsWith", "startsWith")}}, {{JSxRef("String.endsWith", "endsWith")}}, {{JSxRef("String.includes", "includes")}}</td> + <td>Devuelve si o no la cadena comienza, termina o contiene una subcadena especificada.</td> + </tr> + <tr> + <td>{{JSxRef("String.concat", "concat")}}</td> + <td>Combina el texto de dos cadenas y devuelve una nueva cadena.</td> + </tr> + <tr> + <td>{{JSxRef("String.fromCharCode", "fromCharCode")}}, {{JSxRef("String.fromCodePoint", "fromCodePoint")}}</td> + <td>Construye una cadena a partir de la secuencia especificada de valores Unicode. Este es un método de la clase <code>String</code>, no una instancia de <code>String</code>.</td> + </tr> + <tr> + <td>{{JSxRef("String.split", "split")}}</td> + <td>Divide un objeto <code>String</code> en un arreglo de cadenas separando la cadena en subcadenas.</td> + </tr> + <tr> + <td>{{JSxRef("String.slice", "slice")}}</td> + <td>Extrae una sección de una cadena y devuelve una nueva cadena.</td> + </tr> + <tr> + <td>{{JSxRef("String.substring", "substring")}}, {{JSxRef("String.substr", "substr")}}</td> + <td>Devuelve el subconjunto especificado de la cadena, ya sea especificando los índices inicial y final o el índice inicial y una longitud.</td> + </tr> + <tr> + <td>{{JSxRef("String.match", "match")}}, {{JSxRef("String.matchAll", "matchAll")}}, {{JSxRef("String.replace", "replace")}}, {{JSxRef("String.replaceAll", "replaceAll")}}, {{JSxRef("String.search", "search")}}</td> + <td>Trabaja con expresiones regulares.</td> + </tr> + <tr> + <td>{{JSxRef("String.toLowerCase", "toLowerCase")}}, {{JSxRef("String.toUpperCase", "toUpperCase")}}</td> + <td> + <p>Devuelve la cadena en minúsculas o mayúsculas, respectivamente.</p> + </td> + </tr> + <tr> + <td>{{JSxRef("String.normalize", "normalize")}}</td> + <td>Devuelve la forma de normalización Unicode del valor de la cadena llamada.</td> + </tr> + <tr> + <td>{{JSxRef("String.repeat", "repeat")}}</td> + <td>Devuelve una cadena que consta de los elementos del objeto repetidos las veces indicadas.</td> + </tr> + <tr> + <td>{{JSxRef("String.trim", "trim")}}</td> + <td>Recorta los espacios en blanco desde el principio y el final de la cadena.</td> + </tr> + </tbody> +</table> + +<h3 id="Plantillas_literales_multilínea">Plantillas literales multilínea</h3> + +<p>Las {{JSxRef("template_strings", "plantillas literales")}} son cadena literales que permiten expresiones incrustadas. Puedes utilizar cadenas de varias líneas y funciones de interpolación de cadenas con ellas.</p> + +<p>Las plantillas literales están encerradas por el carácter (<code>``</code>) ({{Interwiki("wikipedia", "Acento_grave", "acento grave")}}) en lugar de comillas simples o dobles. Las plantillas literales pueden contener marcadores de posición. Estos se indican mediante el signo de dólar y llaves (<code>${expresión}</code>).</p> + +<h4 id="Multilíneas">Multilíneas</h4> + +<p>Cualquier caracter de nueva línea insertado en la fuente es parte de la plantilla literal. Usando cadenas normales, tendrías que usar la siguiente sintaxis para obtener cadenas multilínea:</p> + +<pre class="brush: js notranslate">console.log('cadena de texto línea 1\n\ +cadena de texto línea 2'); +// "cadena de texto línea 1 +// cadena de texto línea 2"</pre> + +<p>Para obtener el mismo efecto con cadenas multilínea, ahora puedes escribir:</p> + +<pre class="brush: js notranslate">console.log(`cadena de texto línea 1 +cadena de texto línea 2`); +// "cadena de texto línea 1 +// cadena de texto línea 2"</pre> + +<h4 id="Expresiones_incrustadas">Expresiones incrustadas</h4> + +<p>Para incrustar expresiones dentro de cadenas normales, usarías la siguiente sintaxis:</p> + +<pre class="brush: js notranslate">const five = 5; +const ten = 10; +console.log('Quince es ' + (five + ten) + ' y no ' + (2 * five + ten) + '.'); +// "Quince es 15 y no 20."</pre> + +<p>Ahora, con las plantillas literales, puedes hacer uso del azúcar sintáctica haciendo que las sustituciones como esta sean más legibles:</p> + +<pre class="brush: js notranslate">const five = 5; +const ten = 10; +console.log (`Quince es ${five + ten} y no ${2 * five + ten}.`); +// "Quince es 15 y no 20."</pre> + +<p>Para obtener más información, lee acerca de {{JSxRef("template_strings", "plantillas literales")}} en la {{JSxRef("../Referencia", "Referencia de JavaScript")}}.</p> + +<h2 id="Internacionalización">Internacionalización</h2> + +<p>El objeto {{JSxRef("Intl")}} es el espacio de nombres para la API de internacionalización de ECMAScript, que proporciona comparación de cadenas sensible al idioma, formato de números y formato de fecha y hora. Los constructores de los objetos {{JSxRef("Collator")}}, {{JSxRef("NumberFormat")}} y {{JSxRef("DateTimeFormat")}} son propiedades del objeto <code>Intl</code>.</p> + +<h3 id="Formato_de_fecha_y_hora">Formato de fecha y hora</h3> + +<p>El objeto {{JSxRef("DateTimeFormat")}} es útil para formatear la fecha y la hora. El siguiente formato es una fecha para el Inglés como se usa en los Estados Unidos. (El resultado es diferente en otra zona horaria).</p> + +<pre class="brush: js notranslate">const msPerDay = 24 * 60 * 60 * 1000; + +// July 17, 2014 00:00:00 UTC. +const july172014 = new Date(msPerDay * (44 * 365 + 11 + 197)); + +const options = { year: '2-digit', month: '2-digit', day: '2-digit', + hour: '2-digit', minute: '2-digit', timeZoneName: 'short' }; +const americanDateTime = new Intl.DateTimeFormat('en-US', options).format; + +console.log(americanDateTime(july172014)); // 07/16/14, 5:00 PM PDT +</pre> + +<h3 id="Formato_de_número">Formato de número</h3> + +<p>El objeto {{JSxRef("NumberFormat")}} es útil para formatear números, por ejemplo, monedas.</p> + +<pre class="brush: js notranslate">const gasPrice = new Intl.NumberFormat('en-US', + { style: 'currency', currency: 'USD', + minimumFractionDigits: 3 }); + +console.log(gasPrice.format(5.259)); // $5.259 + +const hanDecimalRMBInChina = new Intl.NumberFormat('zh-CN-u-nu-hanidec', + { style: 'currency', currency: 'CNY' }); + +console.log(hanDecimalRMBInChina.format(1314.25)); // ￥ 一,三一四.二五 +</pre> + +<h3 id="Colación">Colación</h3> + +<p>El objeto {{JSxRef("Collator")}} es útil para comparar y ordenar cadenas.</p> + +<p>Por ejemplo, en realidad hay dos órdenes de clasificación diferentes en Alemán, «<em>phonebook</em>» y «<em>dictionary</em>». La clasificación «<em>phonebook</em>» enfatiza el sonido, y es como si "ä", "ö", etc. se expandieran a "ae", "oe", etc. antes de la clasificación.</p> + +<pre class="brush: js notranslate">const names = ['Hochberg', 'Hönigswald', 'Holzman']; + +const germanPhonebook = new Intl.Collator('de-DE-u-co-phonebk'); + +// como ordenando ["Hochberg", "Hoenigswald", "Holzman"]: +console.log(names.sort(germanPhonebook.compare).join(', ')); +// registra "Hochberg, Hönigswald, Holzman" +</pre> + +<p>Algunas palabras alemanas se conjugan con diéresis adicionales, por lo que en los diccionarios es sensato ordenar ignorando diéresis (excepto cuando se ordenan palabras que difieren <em>solo</em> por las diéresis: «<em>schon</em>» antes de «<em>schön</em>»).</p> + +<pre class="brush: js notranslate">const germanDictionary = new Intl.Collator('de-DE-u-co-dict'); + +// como si ordenara ["Hochberg", "Honigswald", "Holzman"]: +console.log(names.sort(germanDictionary.compare).join(', ')); +// registra "Hochberg, Holzman, Hönigswald" +</pre> + +<p>Para obtener más información sobre la API de {{JSxRef("Intl")}}, consulta también la <a href="https://hacks.mozilla.org/2014/12/introducing-the-javascript-internationalization-api/">Introducción a la API de internacionalización de JavaScript</a>.</p> + +<div>{{PreviousNext("Web/JavaScript/Guide/Numbers_and_dates", "Web/JavaScript/Guide/Regular_Expressions")}}</div> |