Olá, caro aluno!

Em aulas anteriores já utilizamos strings, ou seja, textos, como, por exemplo, para exibir as nossas respostas nas páginas HTML. Utilizamos, no máximo, apenas o símbolo + para unir duas ou mais strings a fim de formar a nossa resposta final. No entanto, JavaScript possui diversas outras funções sobre strings como, por exemplo, funções que retornam o tamanho de uma string, para encontrar partes específicas dentro de uma string, para extrair partes de uma string e para transformar strings. Nesta aula, você vai conhecer várias dessas funções e aprenderá a utilizá-las na prática.

Em JavaScript, as strings são definidas usando aspas simples ou duplas. No entanto, é importante usar sempre as aspas retas e não as aspas curvas.

Perceba no slide a atribuição de duas strings às variáveis texto_1 e texto_2. As duas strings têm o mesmo conteúdo, Instituto Metrópole Digital, mas a primeira é definida usando aspas duplas e a segunda é definida usando aspas simples. Ao lado da definição, no slide, podemos ver os resultados ao escrever os valores dessas duas variáveis em uma página HTML, eles são idênticos! Veja na figura a seguir:

Além disso, pode-se usar as aspas simples ou duplas dentro de uma string. No exemplo apresentado no slide, fazemos isso na atribuição às variáveis texto_3 e texto_4. Note que se desejarmos usar aspas simples dentro do texto, precisaremos utilizar as aspas duplas na definição do texto, e vice-versa. No slide, estão os resultados que você terá ao escrever os valores dessas duas variáveis em uma página HTML.

Além de termos essa maneira de utilizar aspas simples e duplas dentro das strings, JavaScript também permite o uso da barra invertida para essa ação. Para isso, basta escrever dentro da string \' e \", para as aspas simples e duplas, respectivamente. No slide, você pode ver que as variáveis texto_5 e texto_6 recebem, na mesma ordem, strings contendo aspas simples e duplas, as quais foram definidas usando, também, aspas simples e duplas. Veja que, ao escrever os valores dessas duas variáveis em uma página HTML, os resultados são idênticos ao que você acabou de ver no slide anterior.

Além disso, podemos utilizar a barra invertida duas vezes, em sequência. No slide, podemos ver que, se usarmos apenas uma barra invertida dentro do texto, como fizemos na atribuição à variável texto_7, ela não irá aparecer na página HTML. Para que ela apareça, precisamos escrever duas barras invertidas, como fizemos na atribuição à variável texto_8.

Por fim, podemos usar a barra invertida para definir caracteres de controle. Porém, não abordaremos esse assunto nesta disciplina. Você pode utilizar o arquivo 07_1 Definindo Strings.html para verificar isso na prática. Fique à vontade para editar esse arquivo a fim de fazer vários testes.

Código 1 - 07_1 Definindo Strings.html

Para organizar o código, é comum que nós, programadores, façamos quebras de linha no meio de um comando quando ele é muito longo. Isso já aconteceu diversas vezes em nossos exemplos quando usamos o comando para escrever a saída dos programas na página HTML. Em JavaScript, o recomendável é fazer isso depois de um operador. No slide, vemos que a linha 15 está longa demais. A fim de deixarmos o código organizado, podemos fazer a quebra da linha desse comando logo depois do operador de atribuição, o =, como podemos também ver no slide. O que você prefere?

No entanto, em caso de textos muito longos, às vezes também é desejável quebrar a linha no meio do texto. Infelizmente, não podemos fazer essa quebra no meio do texto, como vemos no slide. Note que o nosso editor de texto já identificou o problema. De fato, devido a esse problema, a página HTML não exibe esse texto. Você pode utilizar o arquivo 07_2 Quebrando Linhas.html para verificar isso na prática. Para resolver esse erro, devemos fazer algo diferente. Você concorda?

Código 2 - 07_2 Quebrando Linhas.html

Uma opção é usarmos a barra invertida dentro do texto para indicar a quebra de linha. Note, no slide, que o problema foi removido. E, de fato, a página HTML agora exibe o texto. No entanto, toda a string é exibida em apenas uma linha. A barra invertida serve apenas para que o interpretador JavaScript entenda a quebra da linha do comando. Para que, de fato, o texto exibido tenha uma quebra de linha, como já fizemos antes, podemos acrescentar a tag HTML <br> à string.

No entanto, a utilização da barra invertida não é a melhor maneira de quebrar a linha de um comando no meio de um texto. Isso porque alguns navegadores não permitem espaços depois da barra invertida. Por esse motivo, recomendo utilizar a concatenação de strings, como podemos ver no slide.

É importante você lembrar que o símbolo + apenas representará a operação aritmética de adição se os dois operandos forem números. Caso um dos operandos seja uma string, o símbolo + será interpretado como a operação de concatenação de strings.

No slide, podemos ver que, ao usarmos o símbolo + com os números 100 e 9, temos o resultado da soma de ambos os números. No entanto, se usarmos a string "100", teremos, como resultado, 1009, independentemente de termos a string "9" ou o número 9 (sem as aspas) como segundo operando.

Apesar de poderem ser objetos, assunto que não abordaremos nesta disciplina, as strings são normalmente valores primitivos. Por isso, assim como fazemos com números, a comparação entre duas strings pode ser feita simplesmente usando o ==. Uma ressalva é importante: em JavaScript, a comparação de strings é sensível a letras maiúsculas e minúsculas.

No slide, vemos a definição de três variáveis, string_1, string_2 e string_3. Se compararmos a string_1 com a string_2, a resposta será true. Porém, se compararmos a string_1 com a string_3, a resposta será false. Isso porque na primeira comparação das strings a letra D está maiúscula em ambas e na segunda comparação da string a letra d está minúscula na string_3 e maiúscula na string_2.

Quando se quer comparar strings, considerando que não há distinção entre letras minúsculas e maiúsculas, você tem duas opções. A primeira delas é converter os dois textos para letras maiúsculas antes de compará-los. A função toUpperCase() deve ser aplicada após o nome de uma variável do tipo string, devidamente separada por ponto. A função retorna o mesmo texto da variável string indicada antes do ponto, porém com todas as suas letras convertidas para maiúscula. Fazendo a conversão dos dois textos para maiúscula, você pode usar a comparação == sem se preocupar com diferenças entre maiúsculas ou minúsculas no texto. A outra opção seria transformar as duas strings para minúsculas ao invés de maiúsculas. Para isso, você fará uso da função toLowerCase(), cujo funcionamento é o inverso do toUpperCase().

Veja agora alguns exemplos de comparação de strings como valores primitivos e objetos. Vamos aproveitar este exemplo para apresentar o método concat(), o qual tem o mesmo comportamento do + quando aplicado a strings, ou seja, concatena as strings. Vamos lá!

Nesse exemplo, vou declarar três strings nas linhas 15, 16 e 17. Na string_1 tem-se o texto "IMD" escrito com letras maiúsculas e na string_2, a concatenação da string "I" usando o símbolo + com a string "M", porém, também irei concatenar a string "M", usando o método concat com a string "D".

Na verdade, o que pretendemos é que "M".concat("D") retorne a string "MD". E aí eu concateno essa string com a string "I" e o resultado esperado é a mesma string da string_1 que é a string "IMD".

Na string_3 foi utilizado esse mesmo método, mas de uma maneira diferente. Escolhi a string_1, ok? Apliquei a ela o método concat para concatenar duas strings e passei duas strings como parâmetros, a string "M" e a string "d". Notem que na string_3, definida na linha 17 o "d" é minúsculo.

Enquanto na string_1 e na string_2 tínhamos o "D" maiúsculo, na string_3 teremos o "d" minúsculo. Quando eu tomar a string "I" e concatená-la às strings "M" maiúsculo e "d" minúsculo, terei, assim, a string "IMd", com o "d" (minúsculo), ok?

Em seguida, definiremos dois objetos usando o construtor de strings. Assim, são dois objetos: objeto_1 e objeto_2, e eu chamo o construtor de string, que me dará um objeto string, ambos com o valor "IMD".

Farei vários testes a partir da linha 22 e, para não ficar muito repetitivo, daremos um valor para a variável resultado e no final escreveremos no HTML, no campo de saída, o valor dessa variável de resultado. Então, a partir de agora estaremos sempre alterando o valor da variável resultado, estará sendo escrito na tela. O primeiro teste é comparar a string_1 com a string_2, presentes na linha 22, usando o comparador ==.

Qual é o resultado esperado com esse teste? Que ele seja true porque, de fato, as duas strings são iguais. São as duas strings que têm "IMD" nelas. Então, se pegarmos esse resultado e escrevermos na tela, veremos, de fato, que ele é true. O segundo teste que faremos (estarei sempre mantendo a linha 22 com o teste atual) é comparar a string_1 com a string_3.

Esperamos que o resultado seja false, porque o "d" da string_3 é minúsculo, como você pode observar na linha 17. Então, ao recarregar essa página, verificamos, de fato, que o resultado é false porque as duas strings são diferentes, e afinal de contas, esse comparador diferencia letras maiúsculas de letras minúsculas.

Agora, faremos outro teste para aplicar o método toUpperCase, na string_1, e, em seguida, comparar esse resultado (de transformar todas as letras da string_1 em maiúsculas) com a mesma operação aplicada à string_3 (aplicar o método toUpperCase na string_3).

Nesse momento, você pode observar que na string_1 não temos consequência alguma, porque as três letras já são maiúsculas, "IMD". Mas, ao aplicarmos o mesmo método na string_3, transformaremos aquele "d" minúsculo que causou a diferença, num "D" maiúsculo. Esperamos que, com essa comparação, o resultado seja true, o que podemos comprovar na página HTML.

Como garantia que, de fato, não temos nenhuma consequência ao aplicar o método toUpperCase na primeira string (uma vez que todas as letras são maiúsculas), percebam que o resultado continua true. A próxima comparação que farei é a outra maneira de comparar duas strings, sem levar em consideração a diferença entre letras maiúsculas e minúsculas, que é utilizar o método toLowerCase.

O método toLowerCase pode ser aplicado à string_1 e à string_3, e como consequência teremos as três letras transformadas em minúsculas. E, novamente, esperamos que essa comparação seja true, afinal de contas, as letras "IMD" estão lá, e como transformamos todas elas em letras minúsculas, a comparação dará true, e que de fato acontece quando eu recarrego.

Desta vez, vamos comparar a string_1 com a string_3. Vejam que já fizemos essa comparação anteriormente, então, eu vou desconsiderá-la agora, já que ela só serviria para confirmar que, se a letra "d" é minúscula, o resultado seria false. Isso porque a letra "d" é maiúscula na string_1 e minúscula na string_3.

Agora, compararemos a string_1 com o objeto_1. O resultado dessa comparação será true, por quê? Porque a string_1 tem o mesmo valor da string do objeto_1. Perceba que o resultado é true, porque o valor é o mesmo, e estamos comparando com o operador ==, que compara os valores. Se fizermos a comparação, notem a diferença na linha 22, onde temos agora ===.

Essa operação vai comparar, além dos valores, os tipos. Vejam que o resultado, em tela, é false, por quê? Porque uma variável tem o tipo string e a outra tem o tipo objeto. Elas têm tipos diferentes, tá certo? Além disso, se usarmos o comparador de == com objetos, nós veremos, que também estamos fazendo a comparação de == do objeto_1 com o objeto_2, vou recarregar a página, vejam que o resultado continua sendo false.

Isso porque são dois objetos diferentes, dois objetos que são intrinsecamente diferentes, sejam eles aqui nesse caso, ou aqui comparados com == ou usando agora o === que também dará o resultado false.

Espero que com esses exemplos, lembrando que o arquivo 07_3 Strings como Objetos.html estará disponível, vocês tenham entendido como funciona a comparação de strings, sejam elas como valores regulares, ou como objetos.

Código 3 - 07_3 Strings como Objetos.html

Terminamos aqui esta videoaula, nela você viu como definir e transformar strings básicas. No entanto, você tem muito mais para conhecer sobre string ainda nesta aula. Nas próximas videoaulas, você vai conhecer métodos e propriedades que JavaScript disponibiliza para as strings, assim como o faz para os números.