Strings

docs.scrimba.com

Você está construindo uma saudação para um usuário autenticado e tem seu nome em uma variável. Você precisa que a página diga "Bem-vindo de volta, Priya" sem digitar "Priya" manualmente, porque amanhã será Kwame, e no dia seguinte será alguém que você nunca ouviu falar. Texto que você pode construir, medir e reformular na hora é uma string, e este capítulo é sobre como trabalhar com elas.

Fazendo strings

Uma string é texto: qualquer sequência de caracteres envolvida em aspas. Você pode usar aspas simples ou duplas, e elas se comportam da mesma maneira, então escolha uma e seja consistente.

const firstName = "Priya";
const greeting = "Welcome back";

A forma mais útil de construir uma string é um template literal, escrito com backticks em vez de aspas. Dentro de um template literal você pode colocar um valor no texto com ${...}, e JavaScript preenche o que quer que esse valor contenha:

const firstName = "Priya";
const message = `Welcome back, ${firstName}`;
console.log(message); // Welcome back, Priya

Esse ${firstName} é um slot. Quando a string é construída, o slot é substituído pelo valor de firstName. Use template literals sempre que estiver construindo texto a partir de pedaços.

Uma string é um valor feito de texto. Aspas simples e duplas produzem strings idênticas, então a escolha entre elas é sobre estilo e sobre qual caractere de aspas você precisa incluir: "it's here" evita escape, assim como 'she said "hi"'.

A forma a preferir é o template literal, uma string escrita com backticks. Ela faz duas coisas que aspas comuns não podem fazer. Ela interpola valores com ${...}, colocando o resultado de qualquer expressão direto no texto, e pode abranger múltiplas linhas sem um escape especial:

const firstName = "Priya";
const itemCount = 3;
const message = `Welcome back, ${firstName}. You have ${itemCount} items waiting.`;
console.log(message); // Welcome back, Priya. You have 3 items waiting.

Qualquer coisa que produza um valor pode ir no slot, não apenas nomes de variáveis, então ${itemCount} poderia igualmente ser ${itemCount + 1}. Construir texto com ${...} fica muito mais limpo do que colar pedaços com aspas e sinais de mais, razão pela qual é o padrão.

Uma string é a primitiva de texto do JavaScript: um dos tipos de valor básicos da linguagem, ao lado de números e booleanos (veja tipos de dados para o conjunto completo). Aspas simples e duplas são intercambiáveis e produzem exatamente o mesmo valor; a única decisão real que forçam é qual caractere de aspas você teria que escapar.

A forma que vale a pena usar por padrão é o template literal, delimitado por backticks. Ele interpola qualquer expressão com ${...}, avaliando o que está dentro e coagindo o resultado a uma string, e preserva quebras de linha literais então texto multi-linha não precisa de \n:

const firstName = "Priya";
const itemCount = 3;
const summary = `Hi ${firstName}, you have ${itemCount} items and ${itemCount === 1 ? "it is" : "they are"} waiting.`;
console.log(summary); // Hi Priya, you have 3 items and they are waiting.

O slot contém uma expressão, não apenas um nome, então aritmética, chamadas de método e comparações funcionam dentro dele. Essa expressividade é por que interpolação vence concatenação para qualquer coisa além de uma string de duas partes: a forma do texto final fica legível na origem. O único hábito a construir é usar backticks por padrão e cair para aspas comuns apenas para uma string fixa de uma única peça onde interpolação não ganha você nada.

JunoFazendo strings Uma string é texto entre aspas, e aspas simples ou duplas funcionam da mesma forma, então escolha uma e mantenha a consistência. Para construir texto a partir de pedaços, use um template literal: backticks com slots ${...} que são preenchidos com seus valores. Essa é a ferramenta que você usará mais.

JunoFazendo strings Aspas simples e duplas fazem strings idênticas, então escolha com base em qual aspas você precisa incluir sem escapar. Mas use template literals por padrão: backticks permitem que você coloque qualquer valor com ${...} e abrace múltiplas linhas gratuitamente. Uma vez que você interpola, colar strings juntas manualmente para de parecer que vale a pena.

JunoFazendo strings Aspas são intercambiáveis; a única coisa que escolhe uma em relação à outra é qual caractere você teria que escapar. Use backticks por padrão porque ${...} recebe uma expressão completa, não apenas um nome, então aritmética e comparações funcionam direto dentro do texto. Mantenha aspas comuns para as strings fixas de uma única peça onde interpolação não ganha você nada.

Juntando e medindo

Você pode juntar duas strings com o operador +. Isso é chamado de concatenação:

const firstName = "Kwame";
const greeting = "Hi " + firstName;
console.log(greeting); // Hi Kwame

Repare no espaço dentro de 'Hi '. Concatenação cola strings exatamente como escritas, então se você esquecer o espaço você fica com HiKwame. Um template literal geralmente fica melhor para o mesmo trabalho: `Hi ${firstName}`.

Toda string sabe seu próprio comprimento. Peça com .length:

const firstName = "Kwame";
console.log(firstName.length); // 5

Você também pode ler um único caractere por sua posição, contando a partir de zero, usando colchetes:

const firstName = "Kwame";
console.log(firstName[0]); // K

O primeiro caractere fica na posição 0, não 1. Essa contagem baseada em zero está em todo lugar em JavaScript, então vale a pena se acostumar agora.

Duas strings se juntam com +, uma operação chamada de concatenação. Funciona, mas fica bagunçado rápido, porque todo espaço literal e separador tem que ser digitado dentro das aspas:

const firstName = "Kwame";
const lastName = "Mensah";
console.log("Hi " + firstName + " " + lastName); // Hi Kwame Mensah

A mesma linha como um template literal é `Hi ${firstName} ${lastName}`, razão pela qual interpolação é o padrão para qualquer coisa com mais de uma peça.

Uma string relata seu tamanho com .length, uma contagem de seus caracteres:

const firstName = "Kwame";
console.log(firstName.length); // 5

E você lê um único caractere por índice com colchetes, contando a partir de zero, então firstName[0] é o primeiro caractere e firstName[4] é o último de uma string de cinco caracteres:

const firstName = "Kwame";
console.log(firstName[0]); // K

Indexação é baseada em zero: o primeiro caractere fica na posição 0.

Strings se juntam com +, uma operação chamada de concatenação. É aceitável para uma junção de duas partes rápida, mas note que + está sobrecarregado: com uma string de cada lado ele concatena, e misturar um número coage esse número a uma string, então 'total: ' + 3 dá 'total: 3' enquanto 3 + 3 dá 6. Template literals contornam a ambiguidade sempre produzindo texto, que é mais uma razão para preferi-los além do caso mais simples.

.length é uma propriedade, não um método, então você a lê sem parênteses:

const label = "Mensah";
console.log(label.length); // 6

Indexação com colchetes é baseada em zero e retorna uma string de um caractere:

const label = "Mensah";
console.log(label[0]); // M

Uma coisa a manter em mente: .length conta as unidades subjacentes da string, nem sempre o que um humano chamaria de caracteres. Para texto comum os dois correspondem. Para alguns emoji e caracteres combinados eles não, porque um único símbolo visível pode ser armazenado como mais de uma unidade, então '😀'.length relata 2. Raramente te morde, mas quando uma contagem de "letras" parece errada para texto com emoji, esse desajuste é por quê.

JunoJuntando e medindo Junte strings com +, mas lembre-se de incluir seus próprios espaços, ou Hi e um nome ficam juntos. Um template literal é geralmente mais limpo para a mesma coisa. Use .length para contar caracteres, e colchetes como name[0] para ler um por posição, contando a partir de zero.

JunoJuntando e medindo+ concatena, mas fica bagunçado no momento em que você tem mais de duas peças, então template literals vencem para qualquer coisa real. .length conta caracteres e não recebe parênteses porque é uma propriedade. Indexação com name[0] é baseada em zero, então o primeiro caractere fica na posição 0 e o último no comprimento menos um.

JunoJuntando e medindo+ está sobrecarregado: string mais qualquer coisa concatena e coage, que é uma fonte discreta de surpresas, então confie em template literals. .length é uma propriedade, sem parênteses. Ela conta unidades de armazenamento, nem sempre caracteres visíveis, então um emoji pode relatar um comprimento de 2. Essa lacuna só aparece com unicode, mas vale a pena saber antes que confunda você.

Métodos de string úteis

Strings vêm com métodos embutidos: ações que você executa em uma string escrevendo um ponto e o nome do método. Aqui estão aqueles que você usará mais.

Mude a capitalização com toUpperCase() e toLowerCase():

const firstName = "priya";
console.log(firstName.toUpperCase()); // PRIYA

Verifique se uma peça de texto aparece dentro de outra com includes(), que responde com true ou false:

const message = "Welcome back";
console.log(message.includes("back")); // true

Corte parte de uma string com slice(), dando-lhe a posição inicial e onde parar. Limpe espaços à toa nas extremidades com trim(). E troque uma peça de texto por outra com replace():

const raw = "  Hello  ";
console.log(raw.trim()); // Hello

const message = "Hi Sam";
console.log(message.replace("Sam", "Yuki")); // Hi Yuki

Existem muitos mais métodos de string, e você não precisa memorizá-los. Aprenda esses cinco, e procure o resto quando um trabalho exigir.

Strings carregam métodos, funções que você chama em uma string com um ponto, e um punhado cobre a maioria do trabalho do dia-a-dia.

toUpperCase() e toLowerCase() mudam a capitalização, que é útil para comparar texto que o usuário digitou sem se preocupar com maiúsculas. includes() retorna um booleano para saber se uma string aparece dentro de outra:

const email = "[email protected]";
console.log(email.toLowerCase().includes("@site.com")); // true

slice(start, end) extrai uma seção, do índice inicial até mas não incluindo o índice final. trim() remove espaços em branco de ambas as extremidades, que você quer em quase qualquer entrada do usuário. replace() troca a primeira correspondência de uma peça de texto por outra:

const raw = "  order-2024  ";
const clean = raw.trim(); // 'order-2024'
console.log(clean.slice(0, 5)); // order
console.log(clean.replace("order", "invoice")); // invoice-2024

Esses cinco são os cavalos de trabalho. Muitos mais existem, então procure a referência quando você atingir algo que eles não cobrem, mas espere confiar nestes.

Strings expõem um grande conjunto de métodos, funções que você invoca no valor com um ponto. Um núcleo pequeno carrega a maior parte da carga: toUpperCase() / toLowerCase() para capitalização, includes() para uma verificação booleana de substring, slice(start, end) para extrair uma seção (start inclusivo, end exclusivo, e negativos contam do final), trim() para remover espaço em branco circundante, e replace() para substituição.

A propriedade que os une: métodos de string nunca mudam o original, eles retornam uma nova string. Strings são imutáveis, significando que um valor de string não pode ser alterado no lugar, então todo método lhe dá uma string fresca e deixa a origem intacta:

const raw = "  Priya Mensah  ";
const cleaned = raw.trim().toLowerCase();
console.log(cleaned); // priya mensah
console.log(raw); // '  Priya Mensah  '  (unchanged)

Porque o resultado é em si uma string, métodos encadeiam, como trim().toLowerCase() mostra acima. Dois casos extremos que valem a pena carregar: replace() troca apenas a primeira correspondência a menos que você peça por todas, e indexação além do final retorna undefined em vez de um erro, então raw[999] é undefined, não uma falha. Esse undefined silencioso é o tipo de coisa que aparece depois como um resultado confuso em vez de uma falha clara.

JunoMétodos de string úteis Métodos são ações que você executa em uma string com um ponto: toUpperCase(), includes() para uma verificação sim ou não, slice() para cortar uma parte, trim() para remover espaços à toa, e replace() para trocar texto. Existem muitos mais, então aprenda esses cinco e procure o resto quando precisar.

JunoMétodos de string úteis Confie em cinco: toUpperCase() e toLowerCase() para capitalização, includes() para uma verificação booleana, slice(start, end) para extrair (end não é incluído), trim() para entrada do usuário, e replace() para a primeira correspondência. Muitos mais existem, então procure a referência quando estes caírem, mas estes cobrem a maioria dos dias.

JunoMétodos de string úteis Os cinco principais são toUpperCase/toLowerCase, includes, slice, trim, e replace, e todos retornam uma nova string porque strings são imutáveis, então resultados encadeiam e o original nunca muda. Duas armadilhas: replace atinge apenas a primeira correspondência por padrão, e indexação além do final dá undefined em vez de errando, que tende a aparecer como um resultado confuso depois em vez de uma falha clara.

Por onde as strings continuam

Strings são um dos blocos de construção principais de JavaScript, e agora você tem as peças que importam: fazê-las com aspas ou template literals, juntá-las e medi-las, e reformulá-las com métodos que sempre retornam algo novo. O mesmo padrão de ponto-e-método que você usou aqui aparece novamente em outros tipos, mais notavelmente quando você começa a trabalhar com listas em métodos de array.

Texto também raramente viaja sozinho. No momento em que você mostra uma contagem, um preço ou um total, você está misturando strings com números, e template literals é como você cose os dois juntos de forma limpa.