Esta tradução está incompleta. Por favor, ajude a traduzir este artigo.

Agora que nós vimos o básico de strings, vamos engatar a próxima marcha e começar a pensar sobre as operações úteis que podemos fazer em strings com métodos embutidos, como encontrar o comprimento de um string, unir e dividir seqüências de caracteres, substituindo um caracter em uma string por outro, e muito mais.

Pré-requisitos: Conhecimento básico de computador, uma compreensão básica de HTML e CSS, uma compreensão do que é o JavaScript.
Objetivo:

Entender que strings são objetos e aprender a usar alguns do métodos básicos disponíveis nesses objetos para manitupar strings.

Strings como objetos

Como dissemos antes e diremos novamente — tudo é um objeto em JavaScript. Quando você cria um string, usando por exemplo

var string = 'This is my string';

sua variável torna-se uma instância do objeto string e, como resultado, tem um grande número de propriedades e métodos diponíveis para ela. Você pode ver isso se você for na página do objeto String e olhar para baixo na lista do lado da página!

Agora, antes de seu cérebro começar a derreter, não se preocupe! Você não precisa saber sobre a maioria deles no início da sua jornada de aprendizado. Mas há alguns que você potencialmente usará com bastante frequência que veremos aqui.

Vamos digitar alguns exemplos em um console novo. Nós fornecemos um abaixo (você também pode abrir este console em uma guia ou janela separada, ou usar o console do desenvolvedor do navegador, se preferir).

Nós fornecemos um abaixo (você também pode abrir esse console em uma aba ou janela separada, ou usar o console do navegador do desenvolvedor se você preferir).

Descobrindo o comprimento de um string

Essa é fácil  — você simplesmente usa a propriedade length. Tente digitar as linhas a seguir:

var browserType = 'mozilla';
browserType.length;

Isso deve retornar o número 7, porque "mozilla"  tem 7 caracteres. Isso é útil por vários motivos; por exemplo, você pode querer encontrar os comprimentos de uma série de nomes para que você possa exibi-los em ordem de comprimento, ou deixar um usuário saber que um nome de usuário que ele informou em um campo de formulário é muito longo se este for maior do que um certo comprimento.

Recuperando um caractere de string específico

Nota complementar: você pode retornar qualquer caractere dentro de uma string usando a notação colchete - isso significa que você inclui colchetes ([]) no final do nome da variável. Dentro dos colchetes, você inclui o número do caractere que deseja retornar, por exemplo, para recuperar a primeira letra, faça o seguinte:

browserType[0];

Computadores contam a partir de 0, não 1! Para recuperar o último caractere de qualquer string, nós podemos usar a linha a seguir, combinando essa técnica com a propriedade length que vimos anteriormente:

browserType[browserType.length-1];

O comprimento de "mozilla" é 7, mas porque a contagem começa de 0, a posição do caractere é 6, daí precisamos usar length-1. Você pode usar isso para, por exemplo, encontrar a primeira letra de uma série de strings e ordená-los alfabeticamente.

Encontrando uma substring dentro de uma string e extraindo-a

  1. Às vezes você quer sabe se uma string menor está presente dentro de uma maior (geralmente dizemos se uma substring está presente dentro de uma string). Isso pode ser feito usando o método indexOf (), que leva um único parameter - a substring que deseja procurar. Experimente isso:
    browserType.indexOf('zilla');
    Isso nos dá o resultado 2, porque a substring "zilla" se inicia na posição 2 (0, 1, 2  — então, 3 caraceteres) dentro de "mozilla". Esse código poderia ser usado para filtrar cadeias de caracteres. Por exemplo, podemos ter uma lista de endereços da web e apenas queremos imprimir aqueles que contenham "mozilla".
  2. Isso pode ser feito de outro jeito, que é possivelmente mais eficaz. Experimente isso:
    browserType.indexOf('vanilla');
    Isso deve lhe dar um resultado -1 — isso é retornado quando a substring, neste caso 'vanilla', não é encontrada na string principal.

    Você pode usar isso para encontrar todas as instâncias de strings que não contém a substraing 'mozilla', ou contém, se você usar o operador de negação, conforme mostrado abaixo. Você poderia fazer algo assim:
    if(browserType.indexOf('mozilla') !== -1) {
      // faz coisas com a string
    }
  3. Quando você sabe onde uma substring começa dentro de uma string e você sabe em qual caractere você deseja que ela termine, slice () pode ser usado para extrair isto. Tente o seguinte:
    browserType.slice(0,3);
    Isso retorna "moz" — o primeiro parâmetro é a posição do caractere a partir da qual será iniciada a extração, e o segundo parâmetro é a posição seguinte do último caractere a ser extraído. Então, a fatia ocorre da primeira posição, até a última posição, mas não incluindo. Você também pode dizer que o segundo parâmetro é igual ao comprimento da string que está sendo retornada.
  4. Also, if you know that you want to extract all of the remaining characters in a string after a certain character, you don't have to include the second parameter! Instead, you only need to include the character position from where you want to extract the remaining characters in a string. Try the following:
    browserType.slice(2);
    This returns "zilla" — this is because the character position of 2 is the letter z, and because you didn't include a second parameter, the substring that was returned was all of the remaining characters in the string. 

Note: The second parameter of slice() is optional: if you don't include it, the slice ends at the end of the original string. There are other options too; study the slice() page to see what else you can find out.

Changing case

The string methods toLowerCase() and toUpperCase() take a string and convert all the characters to lower- or uppercase, respectively. This can be useful for example if you want to normalize all user-entered data before storing it in a database.

Let's try entering the following lines to see what happens:

var radData = 'My NaMe Is MuD';
radData.toLowerCase();
radData.toUpperCase();

Updating parts of a string

You can replace one substring inside a string with another substring using the replace() method. This works very simply at a basic level, although there are some advanced things you can do with it that we won't go into yet.

It takes two parameters — the string you want to replace, and the string you want to replace it with. Try this example:

browserType.replace('moz','van');

Note that to actually get the updated value reflected in the browserType variable in a real program, you'd have to set the variable value to be the result of the operation; it doesn't just update the substring value automatically. So you'd have to actually write this: browserType = browserType.replace('moz','van');

Active learning examples

In this section we'll get you to try your hand at writing some string manipulation code. In each exercise below, we have an array of strings, and a loop that processes each value in the array and displays it in a bulleted list. You don't need to understand arrays or loops right now — these will be explained in future articles. All you need to do in each case is write the code that will output the strings in the format that we want them in.

Each example comes with a "Reset" button, which you can use to reset the code if you make a mistake and can't get it working again, and a "Show solution" button you can press to see a potential answer if you get really stuck.

Filtering greeting messages

In the first exercise we'll start you off simple — we have an array of greeting card messages, but we want to sort them to list just the Christmas messages. We want you to fill in a conditional test inside the if( ... ) structure, to test each string and only print it in the list if it is a Christmas message.

  1. First think about how you could test whether the message in each case is a Christmas message. What string is present in all of those messages, and what method could you use to test whether it is present?
  2. You'll then need to write a conditional test of the form operand1 operator operand2. Is the thing on the left equal to the thing on the right? Or in this case, does the method call on the left return the result on the right?
  3. Hint: In this case it is probably more useful to test whether the method call isn't equal to a certain result.

Fixing capitalization

In this exercise we have the names of cities in the United Kingdom, but the capitalization is all messed up. We want you to change them so that they are all lower case, except for a capital first letter. A good way to do this is to:

  1. Convert the whole of the string contained in the input variable to lower case and store it in a new variable.
  2. Grab the first letter of the string in this new variable and store it in another variable.
  3. Using this latest variable as a substring, replace the first letter of the lowercase string with the first letter of the lowercase string changed to upper case. Store the result of this replace procedure in another new variable.
  4. Change the value of the result variable to equal to the final result, not the input.

Note: A hint — the parameters of the string methods don't have to be string literals; they can also be variables, or even variables with a method being invoked on them.

Making new strings from old parts

In this last exercise, the array contains a bunch of strings containing information about train stations in the North of England. The strings are data items that contain the three-letter station code, followed by some machine-readable data, followed by a semicolon, followed by the human-readable station name. For example:

MAN675847583748sjt567654;Manchester Piccadilly

We want to extract the station code and name, and put them together in a string with the following structure:

MAN: Manchester Piccadilly

We'd recommend doing it like this:

  1. Extract the three-letter station code and store it in a new variable.
  2. Find the character index number of the semicolon.
  3. Extract the human-readable station name using the semicolon character index number as a reference point, and store it in a new variable.
  4. Concatenate the two new variables and a string literal to make the final string.
  5. Change the value of the result variable to equal to the final string, not the input.

Conclusion

You can't escape the fact that being able to handle words and sentences in programming is very important — particularly in JavaScript, as websites are all about communicating with people. This article has given you the basics that you need to know about manipulating strings for now. This should serve you well as you go into more complex topics in the future. Next, we're going to look at the last major type of data we need to focus on in the short term — arrays.

 

In this module

 

Etiquetas do documento e colaboradores

Colaboradores desta página: mwilson.oliveira, colares
Última atualização por: mwilson.oliveira,