Sequências JavaScript

Índice

    Mostrar índice

Strings JavaScript servem para armazenar e manipular texto.

Uma string JavaScript contém zero ou mais caracteres escritos entre aspas.

Exemplo

let text = "John Doe";

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Strings</h1>

<p id="demo"></p>

<script>
let text = "John Doe";  // String written inside quotes
document.getElementById("demo").innerHTML = text;
</script>

</body>
</html>

Você pode usar aspas simples ou duplas:

Exemplo

let carName1 = "Volvo XC60";  
  // Double quotes
let carName2 = 'Volvo XC60';  // Single quotes

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Strings</h1>
<p>Strings are written inside quotes. You can use single or double quotes:</p>

<p id="demo"></p>

<script>
let carName1 = "Volvo XC60"; // Double quotes
let carName2 = 'Volvo XC60'; // Single quotes

document.getElementById("demo").innerHTML =
carName1 + " " + carName2; 
</script>

</body>
</html>

Você pode usar aspas dentro de uma string, desde que elas não correspondam às aspas ao redor da string:

Exemplo

let answer1 = "It's alright";
let answer2 = "He is called 'Johnny'";
let answer3 = 'He is called "Johnny"';

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Strings</h1>
<p>You can use quotes inside a string, as long as they don't match the quotes surrounding the string.</p>

<p id="demo"></p>

<script>
let answer1 = "It's alright";
let answer2 = "He is called 'Johnny'";
let answer3 = 'He is called "Johnny"'; 

document.getElementById("demo").innerHTML =
answer1 + "<br>" + answer2 + "<br>" + answer3; 
</script>

</body>
</html>

Comprimento da corda

Para encontrar o comprimento de uma string, use a propriedade interna length:

Exemplo

let text = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
let length = text.length;

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Strings</h1>
<h2>The length Property</h2>

<p>The length of the string is:</p>
<p id="demo"></p>

<script>
let text = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
document.getElementById("demo").innerHTML = text.length;
</script>

</body>
</html>

Personagem de fuga

Como as strings devem ser escritas entre aspas, o JavaScript interpretará mal esta string:

let text = "We are the so-called "Vikings" from the north.";

A string será cortada para "Nós somos os chamados".

A solução para evitar esse problema é usar o caractere de escape de barra invertida.

O caractere de escape de barra invertida (\) transforma caracteres especiais em caracteres de string:

Code Result Description
\' ' Single quote
\" " Double quote
\\ \ Backslash

A sequência \" insere aspas duplas em uma string:

Exemplo

let text = "We are the so-called \"Vikings\" from the north.";

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Strings</h1>

<p>The escape sequence \" inserts a double quote in a string.</p>

<p id="demo"></p>

<script>
let text = "We are the so-called \"Vikings\" from the north.";
document.getElementById("demo").innerHTML = text; 
</script>

</body>
</html>

A sequência \' insere uma aspa simples em uma string:

Exemplo

let text= 'It\'s alright.';

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Strings</h1>

<p>The escape sequence \' inserts a single quote in a string.</p>

<p id="demo"></p>

<script>
let text = 'It\'s alright.';
document.getElementById("demo").innerHTML = text; 
</script>

</body>
</html>

A sequência \\ insere uma barra invertida em uma string:

Exemplo

let text = "The character \\ is called backslash.";

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Strings</h1>

<p>The escape sequence \\ inserts a backslash in a string.</p>

<p id="demo"></p>

<script>
let text = "The character \\ is called backslash.";
document.getElementById("demo").innerHTML = text; 
</script>

</body>
</html>

Seis outras sequências de escape são válidas em JavaScript:

\b

Retrocesso

\f

Feed de formulário

\n

Nova linha

\r

Retorno de transporte

\t

Tabulador Horizontal

\v

Tabulador Vertical

Os 6 caracteres de escape acima foram originalmente projetados para controlar máquinas de escrever, teletipos e aparelhos de fax. Eles não fazem nenhum sentido em HTML.

Quebrando longas linhas de código

Para melhor legibilidade, os programadores geralmente gostam de evitar linhas de código mais longas do que 80 caracteres.

Se uma instrução JavaScript não couber em uma linha, o melhor lugar para quebrar é depois de um operador:

Exemplo

document.getElementById("demo").innerHTML =
"Hello Dolly!";

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Statements</h2>

<p>
The best place to break a code line is after an operator or a comma.
</p>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML =
"Hello Dolly!";
</script>

</body>
</html>

Você também pode dividir uma linha de código dentro de uma string de texto com uma única barra invertida:

Exemplo

document.getElementById("demo").innerHTML = 
"Hello \
Dolly!";

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Strings</h1>

<p>
You can break a code line within a text string with a backslash.
</p>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = "Hello \
Dolly!";
</script>

</body>
</html>

O método \ não é o método preferido. Pode não ter suporte universal.
Alguns navegadores têm não permitir espaços atrás do caractere \.

Uma maneira mais segura de quebrar uma string é usar string Adição:

Exemplo

document.getElementById("demo").innerHTML = "Hello " + 
"Dolly!";

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Strings</h1>

<p>The safest way to break a code line in a string is using string addition.</p>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = "Hello " +
"Dolly!";
</script>

</body>
</html>

Você não pode quebrar uma linha de código com uma barra invertida:

Exemplo

document.getElementById("demo").innerHTML = \ 
"Hello Dolly!";

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Statements</h2>

<p id="demo">You cannot break a code line with a \ backslash.</p>

<script>
document.getElementById("demo").innerHTML = \
"Hello Dolly.";
</script>

</body>
</html>

Strings JavaScript como objetos

Normalmente, strings JavaScript são valores primitivos, criados a partir de literais:

let x = "John";

Mas strings também podem ser definidas como objetos com a palavra-chave new:

let y = new String("John");

Exemplo

let x = "John";
let y = new String("John");

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Strings</h1>

<p id="demo"></p>

<script>
// x is a string
let x = "John";

// y is an object
let y = new String("John");

document.getElementById("demo").innerHTML =
typeof x + "<br>" + typeof y;
</script>

</body>
</html>

Não crie objetos Strings.

A palavra-chave new complica o código e diminui a velocidade de execução.

Objetos string podem produzir resultados inesperados:

Ao usar o operador ==, x e y são iguais:

let x = "John";
let y = new String("John");

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>

<h2>Never Create Strings as Objects</h2>
<p>Strings and objects cannot be safely compared.</p>

<p id="demo"></p>

<script>
let x = "John";        // x is a string
let y = new String("John");  // y is an object
document.getElementById("demo").innerHTML = (x==y);
</script>

</body>
</html>

Ao usar o operador ===, xey são diferentes:

let x = "John";
let y = new String("John");

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>

<h2>Never Create Strings as Objects</h2>
<p>Strings and objects cannot be safely compared.</p>

<p id="demo"></p>

<script>
let x = "John";        // x is a string
let y = new String("John");  // y is an object
document.getElementById("demo").innerHTML = (x===y);
</script>

</body>
</html>

Observe a diferença entre (x==y) e (x===y).

(x == y) verdadeiro ou falso?

let x = new String("John");
let y = new String("John");

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>

<h2>Never Create Strings as Objects</h2>
<p>JavaScript objects cannot be compared.</p>

<p id="demo"></p>

<script>
let x = new String("John");  // x is an object
let y = new String("John");  // y is an object
document.getElementById("demo").innerHTML = (x==y);
</script>

</body>
</html>

(x === y) verdadeiro ou falso?

let x = new String("John");
let y = new String("John");

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>

<h2>Never Create Strings as Objects</h2>
<p>JavaScript objects cannot be compared.</p>

<p id="demo"></p>

<script>
let x = new String("John");  // x is an object
let y = new String("John");  // y is an object
document.getElementById("demo").innerHTML = (x===y);
</script>

</body>
</html>

Comparar dois objetos JavaScript sempre retorna falso.

Referência completa de string

Para uma referência completa de String, acesse:

Referência completa de string JavaScript.

A referência contém descrições e exemplos de todas as propriedades e métodos de string.