Vamos ver neste artigo diversas formas de trabalhar com strings no JavaScript.

Ao criar um string no JavaScript, ela herda diversos métodos do objeto String. Vamos ver a seguir os métodos mais comuns para trabalhar com strings

O que você vai ver neste artigo?

01 - Ver o tamanho de uma string.

02 - Converter em maísculo ou minúsculo.

03 - Como separar uma string.

04 - Concatenar strings.

05 - Retornar parte de uma string.

06 - Verificar se uma string contém uma determinada string.

07 - Verificar se uma string termina com uma determinada string.

08 - Converter um array de strings numa string.

09 - Substituir uma string.

10 - Repetir uma string.

11 - Removendo espaços em branco do final da string.

12 - Utilizar expressões regulares para trabalhar com strings

13 - Comparar strings

01 - Ver o tamanho de uma string

var texto = "blog bins";

console.log(texto.length); //9

O método length permite obter o comprimento em caracteres de uma string.

Retornar apenas 1 caractere

var texto = "blog bins";

console.log(texto[2]); //o

Você também pode tratar uma string como se fosse um array. Neste exemplo, foi retornar o terceiro caractere da string

Outra forma de fazer isso seria utilizar o método charAt().

var texto = "blog bins";

console.log(texto.charAt(2)); //o

02 - Converter em maísculo ou minúsculo

Para converter uma string em maiusculo ou minúsculo utilizamos os métodos toUpperCase() e toLowerCase().

var texto = "blog bins";

console.log(texto.toUpperCase());

console.log(texto.toLowerCase());

03 - Como separar uma string

Para separar uma string utilizamos o método split(). Será necessário informar um caractere que será o separador. O retorno deste método será um array onde cada elemento será uma parte da string de acordo com o separador informado

var texto = "blog,javascript,php,sql";

console.log(texto.split(","));

04 - Concatenar strings

Para juntar strings podemos usar o método concat().

var texto = "blog";

console.log(texto.concat(" bins")); //blog bins

Uma outra forma de fazer isso seria usar o sinal de "+"

var texto = "blog";

console.log(texto + " bins"); //blog bins

05 - Retornar parte de uma string

Para retornar parte de uma string a partir de uma certa posição se utiliza o método slice(). Ele recebe 2 parâmetros, o primeiro é a posição inicial, o segundo é a posição final.

var texto = "blog bins";

console.log(texto.slice(4,9)); //bins

Uma outra forma de fazer isso seria utilizar o método substring(). Ele recebe dois parâmetros, o primeiro é a posição inicial, e o segundo parâmetro, opcional, é a posição final.

var texto = "blog bins";

console.log(texto.substring(4,9));//bins

Se você deseja retornar uma letra dentro de uma string pode usar o método chartAt(), ele recebe como parâmetro a posição que você deseja retornar

var texto = "blog bins";

console.log(texto.charAt(0)); //b

06 - Verificar se uma string contém uma determinada string

Para verificar se a string contem uma determinada substring podemos usar o método includes(), ele retorna TRUE se a substring informada existir, caso contrário retorna false

var texto = "blog bins";

console.log(texto.includes("bins")); //true

Se você deseja saber qual a primeira posição de uma determina string pode usar o método indexOf(). Ele recebe dois parâmetros, o primeiro é a string que desejamos localizar, e o segundo parâmetro, opcional, é a posição inicial da pesquisa.

var texto = "blog bins";

console.log(texto.indexOf("b")); //0

Você deve estar se perguntado como localizar a última ocorrência de uma string. Para isso existe um método chamado lastIndexOf().

var texto = "blog bins";

console.log(texto.lastIndexOf("b")); //5

07 - Verificar se uma string termina com uma determinada string

Para verificar se uma string termina com uma determinada substring podemos usar o método endsWith(), ele retorna TRUE se a substring informada existir no final da string, caso contrário retorna false.

var texto = "blog bins";

console.log(texto.endsWith("blog")); //false

08 - Converter um array de strings numa string.

Para juntar vários elementos de um array de strings e converter todos numa string única podemos usar o método join() do array, o método join recebe um parâmetro que é o caractere usado como separador entre cada um dos elementos do array

var linguagens = ["javascript", "php", "asp", "sql"];

var texto = linguagens.join(" ");

console.log(texto); //javascript, php, asp, sql

09 - Substituir uma string

Para substituir parte de uma string utilizamos o método replace()

var texto = "blog teste";

console.log(texto.replace("teste","bins")); //blog bins

10 - Repetir uma string

Para repetir uma string se utiliza o método repeat(). Ele recebe como parâmetro a quantidade de cópias que você quer.

var texto = "blog";

console.log(texto.repeat(3));

11 - Removendo espaços em branco do final da string

Para remover espaços em branco no final da string podemos usar o método trim().

var texto = "blog ";

console.log(texto.trim());

12 - Utilizar expressões regulares para trabalhar com strings

Expressões regulares são um recurso que existe em várias linguagens de programação que permitem validar strings de acordo com um determinado padrão. Neste exemplo, vamos validar se a string informada possui apenas letras. O retorno deve ser true se houver apenas letras e false se estiver no formato incorreto.

const string1 = "Blog";

const string2 = "Blog1";

const stringRegex = /^[a-zA-Z]+$/

console.log(string1.match(stringRegex)); // True

console.log(string2.match(stringRegex)); // Null

A variável stringRegex guarda o padrão que desejamos validar. Numa expressão regular, os padrões são inseridos entre as barras (/), perceba que elas aparerem no começo e no fim.

const stringRegex = /^[a-zA-Z]+$/

Os caracteres informados entre as barras são as regras que definem o padrão que queremos localizar. O que está entre chaves [] é o intervalo de caracteres válidos, que seria letras maiúsculas e minúsculas [a-zA-Z]. O ^ representa o começo da expressão e o $ é o final. A regra definida que dizer para procurar qualquer string que comece com qualquer letra maiuscula ou minuscula, os caracteres podem ser repetir várias vezes.

Utilizando o método match, podemos validar se a nossa string segue o padrão desejado. Perceba que ela recebe como parâmetro a expressão que desejamos avaliar. 

console.log(string1.match(stringRegex)); // True

Se você quer ver mais exemplos de como trabalhar com expressões regulares no JavaScript pode consultar este link:

Localizando e substituindo dados com expressões regulares com JavaScript

13 - Comparar strings

Algo muito importante para quem está começando com o JavaScript. O JavaScript é case sensitive, ou seja, ele faz distinção entre maiúsculas e minúsculas

const a = 'a';

const b = 'A'

console.log(a === b); // false

Exemplo prático. Convertendo a primeira letra em máiúsculo.

Vamos ver algo prático com base no conteúdo que vimos neste artigo. Vamos converter a primeira letra da string em maíuculo.

const str = 'blog';

const str2 = str.charAt(0).toUpperCase() + str.slice(1);

console.log(str2);

E se eu tiver uma lista de palavras e quiser converter cada letra inicial em maísculo? Para isso será necessário converter nossa string num array e utilizar uma estrutura de repetição FOR para iterar com cada elemento.

const str = 'hoje eu aprendi muitas coisas';

const arr = str.split(" ");

for (var i = 0; i < arr.length; i++) {

    arr[i] = arr[i].charAt(0).toUpperCase() + arr[i].slice(1);

}

const str2 = arr.join(" ");

console.log(str2);