Conversões de tipo JavaScript

Índice

    Mostrar índice

  • Convertendo Strings em Números

  • Convertendo Números em Strings

  • Convertendo datas em números

  • Convertendo Números em Datas

  • Convertendo Booleanos em Números

  • Convertendo Números em Booleanos

Conversão de tipo JavaScript

Variáveis JavaScript podem ser convertidas em uma nova variável e outro tipo de dados:

  • Pelo uso de uma função JavaScript

  • Automaticamente pelo próprio JavaScript

Convertendo Strings em Números

O método global Number() converte uma variável (ou um valor) em um número.

Uma string numérica (como "3,14") é convertida em um número (como 3,14).

Uma string vazia (como "") é convertida em 0.

Uma string não numérica (como "John") é convertida em NaN (não é um número).

Exemplos

Estes irão converter:

Number("3.14")
Number(Math.PI)
Number(" ")
Number("")

Estes não serão convertidos:

Number("99 88")
Number("John")

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Numbers</h1>
<h2>The Number() Method</h2>

<p>The Number() metod converts a variable (or value) into a number:</p>

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

<script>
document.getElementById("demo").innerHTML =
Number("3.14") + "<br>" +
Number(Math.PI) + "<br>" +
Number("    ") + "<br>" +
Number("") + "<br>" +
Number("99 88") + "<br>" +
Number("John") + "<br>";
</script>

</body>
</html>

Métodos numéricos

No capítulo Métodos Numéricos, você encontrará mais métodos que podem ser usados para converter strings em números:

Method

Descrição

Number()

Retorna um número, convertido do seu argumento

parseFloat()

Analisa uma string e retorna um número de ponto flutuante

parseInt()

Analisa uma string e retorna um número inteiro

O Operador Unário +

O operador unário + pode ser usado para converter uma variável em um número:

Exemplo

let y = "5";     
// y is a string
let x = + y;      
// x is a number

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>

<h2>The JavaScript typeof Operator</h2>

<p>The typeof operator returns the type of a variable or expression:</p>

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

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

</body>
</html>

Se o variável não pode ser convertida, ela ainda se tornará um número, mas com o valor NaN (Não é um número):

Exemplo

let y = "John";  
// y is a string
let x = + y;      // x is a number (NaN)

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>

<h2>The JavaScript typeof Operator</h2>

<p>The typeof operator returns the type of a variable or expression:</p>

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

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

</body>
</html>

Convertendo Números em Strings

O método global String() pode converter números em strings.

Pode ser usado em qualquer tipo de números, literais, variáveis ou expressões:

Exemplo

String(x)         // returns a string from a number variable x
 String(123)       // returns a string from a number literal 123
 String(100 + 23)  // returns a string from a number from an expression

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>

<h2>The JavaScript String() Method</h2>

<p>The String() method can convert a number to a string.</p>

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

<script>
let x = 123;
document.getElementById("demo").innerHTML =
  String(x) + "<br>" +
  String(123) + "<br>" +
  String(100 + 23);
</script>
</body>
</html>

O método Number toString() faz o mesmo.

Exemplo

x.toString()
(123).toString()
(100 + 23).toString()

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Number Methods</h2>

<p>The toString() method converts a number to a string.</p>

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

<script>
let x = 123;
document.getElementById("demo").innerHTML =
  x.toString() + "<br>" +
   (123).toString() + "<br>" +
   (100 + 23).toString();
</script>

</body>
</html>

Mais métodos

No capítulo Métodos Numéricos, você encontrará mais métodos que podem ser usados para converter números em cordas:

toExponential()

Retorna uma string, com um número arredondado e escrito em notação exponencial.

toFixed()

Retorna uma string, com um número arredondado e escrito com um número especificado de decimais.

toPrecision()

Retorna uma string, com um número escrito com um comprimento especificado

Convertendo datas em números

O método global Number() pode ser usado para converter datas em números.

d = new Date();
Number(d)          // returns 1404568027739

O método de data getTime() faz o mesmo.

d = new Date();
d.getTime()        // returns 1404568027739

Convertendo datas em strings

O método global String() pode converter datas em cordas.

 String(Date())  // returns "Thu Jul 17 2014 15:38:19 GMT+0200 (W. Europe Daylight Time)"

O método Date toString() faz o mesmo.

Exemplo

 Date().toString()  // returns "Thu Jul 17 2014 15:38:19 GMT+0200 (W. Europe Daylight Time)"

No capítulo Métodos de Data, você encontrará mais métodos que podem ser usados para converter datas em cordas:

getDate()

Obtenha o dia como um número (1-31)

getDay()

Obtenha um número para o dia da semana (0-6)

getFullYear()

Obtenha o ano de quatro dígitos (aaaa)

getHours()

Obtenha a hora (0-23)

getMilliseconds()

Obtenha os milissegundos (0-999)

getMinutes()

Obtenha os minutos (0-59)

getMonth()

Obtenha o mês (0-11)

getSeconds()

Obtenha os segundos (0-59)

getTime()

Obtenha a hora (milissegundos desde 1º de janeiro de 1970)

Convertendo Booleanos em Números

O método global Number() também pode converter booleanos em números.

Number(false)     // returns 0
Number(true)      // returns 1

Convertendo Booleanos em Strings

O método global String() pode converter booleanos em cordas.

String(false)      // returns "false"
String(true)       // returns "true"

O método booleano toString() faz o mesmo.

false.toString()   // returns "false"
  true.toString()    // returns "true"

Conversão automática de tipo

Quando o JavaScript tenta operar com um tipo de dados "errado", ele tentará converta o valor para um tipo "certo".

O resultado nem sempre é o que você espera:

5 + null    // returns 5         because null is converted to 0
"5" + null  // returns "5null"   because null is converted to "null"
"5" + 2     // returns 
    "52"      because 2 is converted to "2"
 "5" - 2     // returns 3         because "5" is converted to 5
"5" * "2"   // returns 
    10        because "5" and "2" are 
    converted to 5 and 2

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Type Conversions</h2>

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

<script>
document.getElementById("demo").innerHTML =
(5 + null) + "<br>"  +
("5" + null) + "<br>" +
("5" + 2) + "<br>" +
("5" - 2) + "<br>" +
("5" * "2") + "<br>" +
("5" / "2") + "<br>"
</script>

</body>
</html>

Conversão automática de strings

JavaScript chama automaticamente a função toString() quando você tenta para "exibir" um objeto ou uma variável:

document.getElementById("demo").innerHTML = myVar;

// if myVar = {name:"Fjohn"}  // toString converts to "[object Object]"
// if myVar = [1,2,3,4]       // toString converts to "1,2,3,4"
// if myVar = new Date()      // toString converts to "Fri Jul 18 2014 09:08:55 GMT+0200"

Números e booleanos também são convertidos, mas isso não é muito visível:

// if myVar = 123             // toString converts to "123"
// if myVar = true            // toString converts to "true"
// if myVar = false           // toString converts to "false"

Tabela de conversão de tipo JavaScript

Esta tabela mostra o resultado da conversão de diferentes valores JavaScript em número, string e booleano:

Valor original:

false

Convertido em número:

0

Convertido em string:

"false"

Convertido para booleano:

false

Experimente →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Type Conversions</h2>

<p>Converting false to other types:</p>

<p id="demo" style="font-family:courier"></p>

<script>
let x = false;
document.getElementById("demo").innerHTML =
"Number : " + Number(x) + "<br>" +
"String : " + String(x) + "<br>" +
"Boolean: " + Boolean(x);
</script>

</body>
</html>

Valor original:

true

Convertido em número:

1

Convertido em string:

"true"

Convertido para booleano:

true

Experimente →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Type Conversions</h2>

<p>Converting true to other types:</p>

<p id="demo" style="font-family:courier"></p>

<script>
let x = true;
document.getElementById("demo").innerHTML =
"Number : " + Number(x) + "<br>" +
"String : " + String(x) + "<br>" +
"Boolean: " + Boolean(x);
</script>

</body>
</html>

Valor original:

0

Convertido em número:

0

Convertido em string:

"0"

Convertido para booleano:

false

Experimente →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Type Conversions</h2>

<p>Converting the number 0 to other types:</p>

<p id="demo" style="font-family:courier"></p>

<script>
let x = 0;
document.getElementById("demo").innerHTML =
"Number : " + Number(x) + "<br>" +
"String : " + String(x) + "<br>" +
"Boolean: " + Boolean(x);
</script>

</body>
</html>

Valor original:

1

Convertido em número:

1

Convertido em string:

"1"

Convertido para booleano:

true

Experimente →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Type Conversions</h2>

<p>Converting the number 1 to other types:</p>

<p id="demo" style="font-family:courier"></p>

<script>
let x = 1;
document.getElementById("demo").innerHTML =
"Number : " + Number(x) + "<br>" +
"String : " + String(x) + "<br>" +
"Boolean: " + Boolean(x);
</script>

</body>
</html>

Valor original:

"0"

Convertido em número:

0

Convertido em string:

"0"

Convertido para booleano:

true

Experimente →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Type Conversions</h2>

<p>Converting the string "0" to other types:</p>

<p id="demo" style="font-family:courier"></p>

<script>
let x = "0";
document.getElementById("demo").innerHTML =
"Number : " + Number(x) + "<br>" +
"String : " + String(x) + "<br>" +
"Boolean: " + Boolean(x);
</script>

</body>
</html>

Valor original:

"000"

Convertido em número:

0

Convertido em string:

"000"

Convertido para booleano:

true

Experimente →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Type Conversions</h2>

<p>Converting the string "000" to other types:</p>

<p id="demo" style="font-family:courier"></p>

<script>
let x = "000";
document.getElementById("demo").innerHTML =
"Number : " + Number(x) + "<br>" +
"String : " + String(x) + "<br>" +
"Boolean: " + Boolean(x);
</script>

</body>
</html>

Valor original:

"1"

Convertido em número:

1

Convertido em string:

"1"

Convertido para booleano:

true

Experimente →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Type Conversions</h2>

<p>Converting the string "1" to other types:</p>

<p id="demo" style="font-family:courier"></p>

<script>
let x = 1;
document.getElementById("demo").innerHTML =
"Number : " + Number(x) + "<br>" +
"String : " + String(x) + "<br>" +
"Boolean: " + Boolean(x);
</script>

</body>
</html>

Valor original:

NaN

Convertido em número:

NaN

Convertido em string:

"NaN"

Convertido para booleano:

false

Experimente →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Type Conversions</h2>

<p>Converting NaN to other types:</p>

<p id="demo" style="font-family:courier"></p>

<script>
let x = NaN;
document.getElementById("demo").innerHTML =
"Number : " + Number(x) + "<br>" +
"String : " + String(x) + "<br>" +
"Boolean: " + Boolean(x);
</script>

</body>
</html>

Valor original:

Infinity

Convertido em número:

Infinity

Convertido em string:

"Infinity"

Convertido para booleano:

true

Experimente →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Type Conversions</h2>

<p>Converting Infinity to other types:</p>

<p id="demo" style="font-family:courier"></p>

<script>
let x = Infinity;
document.getElementById("demo").innerHTML =
"Number : " + Number(x) + "<br>" +
"String : " + String(x) + "<br>" +
"Boolean: " + Boolean(x);
</script>

</body>
</html>

Valor original:

-Infinity

Convertido em número:

-Infinity

Convertido em string:

"-Infinity"

Convertido para booleano:

true

Experimente →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Type Conversions</h2>

<p>Converting -Infinity to other types:</p>

<p id="demo" style="font-family:courier"></p>

<script>
let x = -Infinity;
document.getElementById("demo").innerHTML =
"Number : " + Number(x) + "<br>" +
"String : " + String(x) + "<br>" +
"Boolean: " + Boolean(x);
</script>

</body>
</html>

Valor original:

""

Convertido em número:

0

Convertido em string:

""

Convertido para booleano:

false

Experimente →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Type Conversions</h2>

<p>Converting an empty string to other types:</p>

<p id="demo" style="font-family:courier"></p>

<script>
let x = "";
document.getElementById("demo").innerHTML =
"Number : " + Number(x) + "<br>" +
"String : " + String(x) + "<br>" +
"Boolean: " + Boolean(x);
</script>

</body>
</html>

Valor original:

"20"

Convertido em número:

20

Convertido em string:

"20"

Convertido para booleano:

true

Experimente →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Type Conversions</h2>

<p>Converting a numeric string to other types:</p>

<p id="demo" style="font-family:courier"></p>

<script>
let x = "20";
document.getElementById("demo").innerHTML =
"Number : " + Number(x) + "<br>" +
"String : " + String(x) + "<br>" +
"Boolean: " + Boolean(x);
</script>

</body>
</html>

Valor original:

NaN

Convertido em número:

"twenty"

Convertido em string:

"twenty"

Convertido para booleano:

true

Experimente →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Type Conversions</h2>

<p>Converting a text string to other types:</p>

<p id="demo" style="font-family:courier"></p>

<script>
let x = "twenty";
document.getElementById("demo").innerHTML =
"Number : " + Number(x) + "<br>" +
"String : " + String(x) + "<br>" +
"Boolean: " + Boolean(x);
</script>

</body>
</html>

Valor original:

[ ]

Convertido em número:

0

Convertido em string:

""

Convertido para booleano:

true

Experimente →

<!DOCTYPE html>
<html>
<body>

<p>Converting an empty array to other types:</p>

<p id="demo" style="font-family:courier"></p>

<script>
var x = [];
document.getElementById("demo").innerHTML =
"Number : " + Number(x) + "<br>" +
"String : " + String(x) + "<br>" +
"Boolean: " + Boolean(x);
</script>

</body>
</html>

Valor original:

[20]

Convertido em número:

20

Convertido em string:

"20"

Convertido para booleano:

true

Experimente →

<!DOCTYPE html>
<html>
<body>

<p>Converting an array with one numeric element to other types:</p>

<p id="demo" style="font-family:courier"></p>

<script>
var x = [20];
document.getElementById("demo").innerHTML =
"Number : " + Number(x) + "<br>" +
"String : " + String(x) + "<br>" +
"Boolean: " + Boolean(x);
</script>

</body>
</html>

Valor original:

[10,20]

Convertido em número:

NaN

Convertido em string:

"10,20"

Convertido para booleano:

true

Experimente →

<!DOCTYPE html>
<html>
<body>

<p>Converting an array with two numeric elements to other types:</p>

<p id="demo" style="font-family:courier"></p>

<script>
var x = [10,20];
document.getElementById("demo").innerHTML =
"Number : " + Number(x) + "<br>" +
"String : " + String(x) + "<br>" +
"Boolean: " + Boolean(x);
</script>

</body>
</html>

Valor original:

["twenty"]

Convertido em número:

NaN

Convertido em string:

"twenty"

Convertido para booleano:

true

Experimente →

<!DOCTYPE html>
<html>
<body>

<p>Converting an array with one string element to other types:</p>

<p id="demo" style="font-family:courier"></p>

<script>
var x = ["twenty"];
document.getElementById("demo").innerHTML =
"Number : " + Number(x) + "<br>" +
"String : " + String(x) + "<br>" +
"Boolean: " + Boolean(x);
</script>

</body>
</html>

Valor original:

["ten","twenty"]

Convertido em número:

NaN

Convertido em string:

"ten,twenty"

Convertido para booleano:

true

Experimente →

<!DOCTYPE html>
<html>
<body>

<p>Converting an array with two string element to other types:</p>

<p id="demo" style="font-family:courier"></p>

<script>
var x = ["ten","twenty"];
document.getElementById("demo").innerHTML =
"Number : " + Number(x) + "<br>" +
"String : " + String(x) + "<br>" +
"Boolean: " + Boolean(x);
</script>

</body>
</html>

Valor original:

function(){}

Convertido em número:

NaN

Convertido em string:

"function(){}"

Convertido para booleano:

true

Experimente →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Type Conversions</h2>

<p>Converting a function to other types:</p>

<p id="demo" style="font-family:courier"></p>

<script>
const x = function(){};
document.getElementById("demo").innerHTML =
"Number : " + Number(x) + "<br>" +
"String : " + String(x) + "<br>" +
"Boolean: " + Boolean(x);
</script>

</body>
</html>

Valor original:

{ }

Convertido em número:

NaN

Convertido em string:

"[object Object]"

Convertido para booleano:

true

Experimente →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Type Conversions</h2>

<p>Converting an object to other types:</p>

<p id="demo" style="font-family:courier"></p>

<script>
const x = {};
document.getElementById("demo").innerHTML =
"Number : " + Number(x) + "<br>" +
"String : " + String(x) + "<br>" +
"Boolean: " + Boolean(x);
</script>

</body>
</html>

Valor original:

null

Convertido em número:

0

Convertido em string:

"null"

Convertido para booleano:

false

Experimente →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Type Conversions</h2>

<p>Converting null to other types:</p>

<p id="demo" style="font-family:courier"></p>

<script>
let x = null;
document.getElementById("demo").innerHTML =
"Number : " + Number(x) + "<br>" +
"String : " + String(x) + "<br>" +
"Boolean: " + Boolean(x);
</script>

</body>
</html>

Valor original:

undefined

Convertido em número:

NaN

Convertido em string:

"undefined"

Convertido para booleano:

false

Experimente →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Type Conversions</h2>

<p>Converting undefined to other types:</p>

<p id="demo" style="font-family:courier"></p>

<script>
let x = undefined;
document.getElementById("demo").innerHTML =
"Number : " + Number(x) + "<br>" +
"String : " + String(x) + "<br>" +
"Boolean: " + Boolean(x);
</script>

</body>
</html>

Os valores entre aspas indicam valores de string.

Valores vermelhos indicam valores que (alguns) programadores podem não esperar.