aboutsummaryrefslogtreecommitdiff
path: root/files/pt-br/web/javascript/guide/text_formatting
diff options
context:
space:
mode:
authorFlorian Dieminger <me@fiji-flo.de>2021-02-11 18:27:17 +0100
committerGitHub <noreply@github.com>2021-02-11 18:27:17 +0100
commitad7f998115dd568832332484debf1f1b16b0c905 (patch)
tree2f3a9137e20731b7f6880fe5adb31fa439215d7d /files/pt-br/web/javascript/guide/text_formatting
parent7a94b4d8daf297eda6df8e5cf933f7ba159bbc76 (diff)
parent1d435be33d8b76cd7b06cd06996c19d74f83cfd4 (diff)
downloadtranslated-content-ad7f998115dd568832332484debf1f1b16b0c905.tar.gz
translated-content-ad7f998115dd568832332484debf1f1b16b0c905.tar.bz2
translated-content-ad7f998115dd568832332484debf1f1b16b0c905.zip
Merge pull request #41 from fiji-flo/unslugging-pt-br
Unslugging pt br
Diffstat (limited to 'files/pt-br/web/javascript/guide/text_formatting')
-rw-r--r--files/pt-br/web/javascript/guide/text_formatting/index.html251
1 files changed, 251 insertions, 0 deletions
diff --git a/files/pt-br/web/javascript/guide/text_formatting/index.html b/files/pt-br/web/javascript/guide/text_formatting/index.html
new file mode 100644
index 0000000000..6242469f60
--- /dev/null
+++ b/files/pt-br/web/javascript/guide/text_formatting/index.html
@@ -0,0 +1,251 @@
+---
+title: Formatando texto
+slug: Web/JavaScript/Guide/Text_formatting
+tags:
+ - Guía
+ - JavaScript
+translation_of: Web/JavaScript/Guide/Text_formatting
+original_slug: Web/JavaScript/Guide/Formatando_texto
+---
+<div>{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Numbers_and_dates", "Web/JavaScript/Guide/Regular_Expressions")}}</div>
+
+<p class="summary">Esse capítulo introduz como trabalhar com strings e texto em JavaScript.</p>
+
+<h2 id="Strings">Strings</h2>
+
+<p>O tipo {{Glossary("String")}} do JavaScript é usado para representar informações de texto. É um conjunto de "elementos" composto por valores inteiros de 16-bits sem sinal. Cada elemento dentro da String ocupa uma posição dentro dessa String. O primeiro elemento está no índice 0, o próximo no índice 1, e assim sucessivamente. O tamanho de uma String é a quantidade de elementos que ela possui. Você pode criar strings usando strings literais ou objetos string.</p>
+
+<h3 id="Strings_literais">Strings literais</h3>
+
+<p>Você pode criar strings usando aspas simples ou aspas duplas:</p>
+
+<pre class="brush: js">'foo'
+"bar"</pre>
+
+<p>Strings mais avançadas podem ser criadas usando <a href="https://pt.wikipedia.org/wiki/Sequ%C3%AAncia_de_escape">sequências de escape</a>:</p>
+
+<h4 id="Sequências_de_escape_hexadecimais">Sequências de escape hexadecimais</h4>
+
+<p>O número depois de \x é interpretado como um número <a href="https://en.wikipedia.org/wiki/Hexadecimal">hexadecimal</a>.</p>
+
+<pre class="brush: js">'\xA9' // "©"
+</pre>
+
+<h4 id="Sequências_de_escape_unicode">Sequências de escape unicode</h4>
+
+<p>As sequências de escape unicode requerem no mínimo quatro caracteres depois do <code>\u</code>.</p>
+
+<pre class="brush: js">'\u00A9' // "©"</pre>
+
+<h4 id="Sequências_de_escape_Unicode_code_point">Sequências de escape Unicode code point</h4>
+
+<p>É novo no ECMAScript 6. Com essas sequências, cada caractere pode ser "escapado" usando números hexadecimais, sendo possível usar pontos de código Unicode de até 0x10FFFF. Com escapes Unicode simples muitas vezes é necessário escrever as metades substitutas separadamente para obter o mesmo resultado.</p>
+
+<p>Veja também {{jsxref("String.fromCodePoint()")}} or {{jsxref("String.prototype.codePointAt()")}}.</p>
+
+<pre class="brush: js">'\u{2F804}'
+
+// o mesmo com escapes Unicode simples
+'\uD87E\uDC04'</pre>
+
+<h3 id="Objetos_String">Objetos String</h3>
+
+<p>O objeto {{jsxref("String")}} é como uma "capa" ao redor do tipo primitivo string.</p>
+
+<pre class="brush: js">var s = new String("foo"); // Cria um objeto String
+console.log(s); // Exibe no console: { '0': 'f', '1': 'o', '2': 'o'}
+typeof s; // Retorna 'object'
+</pre>
+
+<p>Você pode chamar qualquer um dos métodos do objeto <code>String</code> em cima de uma string literal — JavaScript automaticamente converte a string literal em um objeto <code>String </code>temporário, chama o método, e então descarta o objeto <code>String</code> temporário. Você pode também usar a propriedade <code>String.length</code> com uma string literal.</p>
+
+<p>Você deve usar strings literais a menos que você realmente precise usar um objeto <code>String</code>, pois objetos <code>String</code> podem ter comportamentos inesperados. Por exemplo:</p>
+
+<pre class="brush: js">var s1 = "2 + 2"; // Cria uma string literal
+var s2 = new String("2 + 2"); // Creates um objeto String
+eval(s1); // Retorna o número 4
+eval(s2); // Retorna a string "2 + 2"</pre>
+
+<p>Um objeto <code>String</code> possui uma propriedade, <code>length</code>, que indica o número de caracteres na string. Por exemplo, o código a seguir atribui o valor 11 à variável <code>x</code>, pois "Olá, mundo!" possui 11 caracteres:</p>
+
+<pre class="brush: js">var minhaString = "Olá, mundo!";
+var x = minhaString.length;
+</pre>
+
+<p>Um objeto <code>String </code>possui uma variedade de métodos: por exemplo aqueles que retornam uma variação da própria string, como <code>substring</code> e <code>toUpperCase</code>.</p>
+
+<p>A tabela a seguir lista os métodos de 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">Descrição</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td>{{jsxref("String.charAt", "charAt")}}, {{jsxref("String.charCodeAt", "charCodeAt")}}, {{jsxref("String.codePointAt", "codePointAt")}}</td>
+ <td>Retorna o código do caractere ou o caractere em uma posição específica na string.</td>
+ </tr>
+ <tr>
+ <td>{{jsxref("String.indexOf", "indexOf")}}, {{jsxref("String.lastIndexOf", "lastIndexOf")}}</td>
+ <td>Retorna a posição de uma substring específica na string ou a última posição da substring específica, respectivamente.</td>
+ </tr>
+ <tr>
+ <td>{{jsxref("String.startsWith", "startsWith")}}, {{jsxref("String.endsWith", "endsWith")}}, {{jsxref("String.includes", "includes")}}</td>
+ <td>Retorna se uma string começa, termina ou contém uma outra string específica.</td>
+ </tr>
+ <tr>
+ <td>{{jsxref("String.concat", "concat")}}</td>
+ <td>Concatena o texto de duas strings e retorna uma nova string.</td>
+ </tr>
+ <tr>
+ <td>{{jsxref("String.fromCharCode", "fromCharCode")}}, {{jsxref("String.fromCodePoint", "fromCodePoint")}}</td>
+ <td>Cria uma string a partir de uma sequência específica de valores Unicode. Esse é um método da classe String, não de uma instância do tipo String.</td>
+ </tr>
+ <tr>
+ <td>{{jsxref("String.split", "split")}}</td>
+ <td>Separa um objeto <code>String </code>em um array de strings, separando a string em substrings.</td>
+ </tr>
+ <tr>
+ <td>{{jsxref("String.slice", "slice")}}</td>
+ <td>Extrai uma seção de uma string e retorna uma nova string.</td>
+ </tr>
+ <tr>
+ <td>{{jsxref("String.substring", "substring")}}, {{jsxref("String.substr", "substr")}}</td>
+ <td>Retorna um subconjunto específico de uma string, definindo os índices inicial e final, ou definindo um índice e um tamanho.</td>
+ </tr>
+ <tr>
+ <td>{{jsxref("String.match", "match")}}, {{jsxref("String.replace", "replace")}}, {{jsxref("String.search", "search")}}</td>
+ <td>Trabalha com expressões regulares.</td>
+ </tr>
+ <tr>
+ <td>{{jsxref("String.toLowerCase", "toLowerCase")}}, {{jsxref("String.toUpperCase", "toUpperCase")}}</td>
+ <td>
+ <p>Retorna a string com todos caracteres em minúsculo, ou maiúsculo, respectivamente.</p>
+ </td>
+ </tr>
+ <tr>
+ <td>{{jsxref("String.normalize", "normalize")}}</td>
+ <td>Retorna a Forma Normalizada Unicode (Unicode Normalization Form) da string que chama o método.</td>
+ </tr>
+ <tr>
+ <td>{{jsxref("String.repeat", "repeat")}}</td>
+ <td>Retorna uma string contendo os elementos do objeto repetidos pela quantidade de vezes dada.</td>
+ </tr>
+ <tr>
+ <td>{{jsxref("String.trim", "trim")}}</td>
+ <td>Retira espaços em branco no começo e no final da string.</td>
+ </tr>
+ </tbody>
+</table>
+
+<h3 id="Template_strings_com_várias_linhas">Template strings com várias linhas</h3>
+
+<p><a href="/en-US/docs/Web/JavaScript/Reference/template_strings">Template strings</a> são strings literais que permitem expressões no seu conteúdo. Você pode usar os recursos de strings com multiplas linhas e interpolações de string com as template strings.</p>
+
+<p>Template strings são declaradas com o acento grave (``) ao invés de aspas simples ou aspas duplas. Essas strings podem conter place holders. Os place holders são indicados pelo cifrão e com chaves ( <code>${expressao}</code> ).</p>
+
+<h4 id="Várias_linhas_(Multi-lines)">Várias linhas (Multi-lines)</h4>
+
+<p>Qualquer caractere de nova linha ( <code>'\n'</code> ) inserido na string também faz parte das template string. Usando strings normais, você teria que usar a sintaxe a seguir para conseguir uma string de várias linhas</p>
+
+<pre class="brush: js">console.log("linha de texto 1\n\
+linha de texto 2");
+// "linha de texto 1
+// linha de texto 2"</pre>
+
+<p>Para obter o mesmo efeito com strings multi-lines, você pode agora escrever:</p>
+
+<pre class="brush: js">console.log(`linha de texto 1
+linha de texto 2`);
+// "linha de texto 1
+// linha de texto 2"</pre>
+
+<h4 id="Expressões_inseridas">Expressões inseridas</h4>
+
+<p>Para conseguir inserir expressões com strings normais, você teria que usar a seguinte sintaxe:</p>
+
+<pre class="brush: js">var a = 5;
+var b = 10;
+console.log("Quinze é " + (a + b) + " e\nnão " + (2 * a + b) + ".");
+// "Quinze é 15 e
+// não 20."</pre>
+
+<p>Agora, com template strings, você tem a capacidade de usar uma forma mais simples e legível para fazer essas substituições:</p>
+
+<pre class="brush: js">var a = 5;
+var b = 10;
+console.log(`Quinze é ${a + b} e\nnão ${2 * a + b}.`);
+// "Quinze é 15 e
+// não 20."</pre>
+
+<p>Para mais informações, leia sobre <a href="/pt-BR/docs/Web/JavaScript/Reference/template_strings">Template strings</a> na <a href="/pt-BR/docs/Web/JavaScript/Reference">referência JavaScript</a>.</p>
+
+<h2 id="Internacionalização">Internacionalização</h2>
+
+<p>O objeto {{jsxref("Intl")}} é o <em>namespace</em> para a API de Internacionalização do ECMAScript, que oferece comparação de strings sensíveis à linguagem, formatação de números, e formatação de datas e horas. Os construtores para os objetos {{jsxref("Collator")}}, {{jsxref("NumberFormat")}}, e {{jsxref("DateTimeFormat")}} são propriedades do objeto <code>Intl</code>.</p>
+
+<h3 id="Formatação_de_data_e_hora">Formatação de data e hora</h3>
+
+<p>O objeto {{jsxref("DateTimeFormat")}} é útil para a formatação de data e hora. O código a seguir formata uma data em inglês no formato que é utilizado nos Estados Unidos. (O resultado é diferente em outro fuso horário).</p>
+
+<pre class="brush: js">var msPorDia = 24 * 60 * 60 * 1000; // número de milisegundos em um dia
+
+// July 17, 2014 00:00:00 UTC.
+var july172014 = new Date(msPorDia * (44 * 365 + 11 + 197));
+
+var opcoes = { year: "2-digit", month: "2-digit", day: "2-digit",
+    hour: "2-digit", minute: "2-digit", timeZoneName: "short" };
+var americanDateTime = new Intl.DateTimeFormat("en-US", opcoes).format;
+
+console.log(americanDateTime(july172014)); // 07/16/14, 5:00 PM PDT
+</pre>
+
+<h3 id="Formatação_de_números">Formatação de números</h3>
+
+<p>O objeto {{jsxref("NumberFormat")}} é útil para formatar números, por exemplo unidade monetária.</p>
+
+<pre class="brush: js">var precoGasolina = new Intl.NumberFormat("en-US",
+                        { style: "currency", currency: "USD",
+                          minimumFractionDigits: 3 });
+
+console.log(precoGasolina.format(5.259)); // $5.259
+
+var hanDecimalRMBInChina = new Intl.NumberFormat("zh-CN-u-nu-hanidec",
+                        { style: "currency", currency: "CNY" });
+
+console.log(hanDecimalRMBInChina.format(1314.25)); // ¥ 一,三一四.二五
+</pre>
+
+<h3 id="Collation">Collation</h3>
+
+<p>O objeto {{jsxref("Collator")}} é usado para comparar e ordenar strings.</p>
+
+<p>Por exemplo, existem atualmente duas ordens diferentes de classificação no Alemão: <em>listaTelefônica</em> e <em>dicionário</em>. A ordenação da <em>listaTelefônica</em> enfatiza o som, e é como se "ä", "ö", e assim por diante, fossem expandidos para "ae", "oe", e assim sucessivamente, para definir a ordem.</p>
+
+<pre class="brush: js">var nomes = ["Hochberg", "Hönigswald", "Holzman"];
+
+var phonebookAlemao = new Intl.Collator("de-DE-u-co-phonebk");
+
+// como se ordenasse ["Hochberg", "Hoenigswald", "Holzman"]:
+console.log(names.sort(phonebookAlemao.compare).join(", "));
+// imprime "Hochberg, Hönigswald, Holzman"
+</pre>
+
+<p>Algumas palavras do alemão são conjugadas com tremas extras, mas no <em>dicionário</em> essas palavras são ordenadas ignorando os tremas (exceto quando ordenando palavras que tem <em>apenas </em>o trema como diferença: <em>schon </em>antes de <em>schön</em>).</p>
+
+<pre class="brush: js">var dicionarioAlemao = new Intl.Collator("de-DE-u-co-dict");
+
+// como se ordenasse ["Hochberg", "Honigswald", "Holzman"]:
+console.log(names.sort(dicionarioAlemao.compare).join(", "));
+// imprime "Hochberg, Holzman, Hönigswald"
+</pre>
+
+<p>Para mais informação sobre a API {{jsxref("Intl")}}, veja também <a href="https://hacks.mozilla.org/2014/12/introducing-the-javascript-internationalization-api/">Introducing the JavaScript Internationalization API (em inglês)</a>.</p>
+
+<div>{{PreviousNext("Web/JavaScript/Guide/Numbers_and_dates", "Web/JavaScript/Guide/Regular_Expressions")}}</div>