Conversions de types JavaScript


Table des matières

    Afficher la table des matières

  • Conversion de chaînes en nombres

  • Conversion de nombres en chaînes

  • Conversion de dates en nombres

  • Conversion de nombres en dates

  • Conversion de booléens en nombres

  • Conversion de nombres en booléens

Conversion de types JavaScript

Les variables JavaScript peuvent être converties en une nouvelle variable et un autre type de données :

  • Par l'utilisation d'une fonction JavaScript

  • Automatiquement par JavaScript lui-même


Conversion de chaînes en nombres

La méthode globale Number() convertit une variable (ou une valeur) en nombre.

Une chaîne numérique (comme "3.14") est convertie en nombre (comme 3.14).

Une chaîne vide (comme "") est convertie en 0.

Une chaîne non numérique (comme "John") est convertie en NaN (Pas un nombre).

Exemples

Ceux-ci convertiront :

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

Ceux-ci ne seront pas convertis :

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

Essayez-le vous-même →

<!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éthodes numériques

Dans le chapitre Méthodes numériques, vous vous trouverez plus de méthodes pouvant être utilisées pour convertir des chaînes en Nombres:

Method

Description

Number()

Renvoie un nombre, converti à partir de son argument

parseFloat()

Analyse une chaîne et renvoie un nombre à virgule flottante

parseInt()

Analyse une chaîne et renvoie un entier


L'opérateur unaire +

L'opérateur unaire + peut être utilisé pour convertir une variable en nombre :

Exemple

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

Essayez-le vous-même →

<!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>


Si la La variable ne peut pas être convertie, elle deviendra quand même un nombre, mais avec la valeur NaN (Pas un numéro) :

Exemple

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

Essayez-le vous-même →

<!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>




Conversion de nombres en chaînes

La méthode globale String() peut convertir des nombres en chaînes.

Il peut être utilisé sur tout type de nombres, littéraux, variables ou expressions :

Exemple

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

Essayez-le vous-même →

<!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>

La méthode Number toString() fait de même.

Exemple

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

Essayez-le vous-même →

<!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>

Plus de méthodes

Dans le chapitre Méthodes numériques, vous vous trouverez d'autres méthodes pouvant être utilisées pour convertir des nombres en cordes :

toExponential()

Renvoie une chaîne, avec un nombre arrondi et écrit en notation exponentielle.

toFixed()

Renvoie une chaîne, avec un nombre arrondi et écrit avec un nombre spécifié de décimales.

toPrecision()

Renvoie une chaîne, avec un nombre écrit avec une longueur spécifiée


Conversion de dates en nombres

La méthode globale Number() peut être utilisée pour convertir des dates en Nombres.

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

La méthode de date getTime() fait de même.

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

Conversion de dates en chaînes

La méthode globale String() peut convertir les dates en cordes.

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

La méthode Date toString() fait de même.

Exemple

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

Dans le chapitre Méthodes de date, vous vous trouverez plus de méthodes pouvant être utilisées pour convertir des dates en cordes :

getDate()

Obtenez le jour sous forme de nombre (1-31)

getDay()

Obtenez le jour de la semaine un numéro (0-6)

getFullYear()

Obtenez l'année à quatre chiffres (aaaa)

getHours()

Obtenez l'heure (0-23)

getMilliseconds()

Obtenez les millisecondes (0-999)

getMinutes()

Obtenez les minutes (0-59)

getMonth()

Obtenez le mois (0-11)

getSeconds()

Obtenez les secondes (0-59)

getTime()

Obtenez l'heure (millisecondes depuis le 1er janvier 1970)


Conversion de booléens en nombres

La méthode globale Number() peut également convertir des booléens en nombres.

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

Conversion de booléens en chaînes

La méthode globale String() peut convertir des booléens en cordes.

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

La méthode booléenne toString() fait de même.

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

Conversion automatique des types

Lorsque JavaScript tente d'opérer sur un "mauvais" type de données, il tente de convertir la valeur en un type "correct".

Le résultat n’est pas toujours celui attendu :

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

Essayez-le vous-même →

<!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>



Conversion automatique des chaînes

JavaScript appelle automatiquement la fonction toString() de la variable lorsque vous essayez pour "sortir" un objet ou une variable :

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"

Les nombres et les booléens sont également convertis, mais cela n'est pas très visible :

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

Table de conversion de types JavaScript

Ce tableau montre le résultat de la conversion de différentes valeurs JavaScript en nombre, chaîne et booléen :


Valeur originale :

false

Converti en nombre :

0

Converti en chaîne :

"false"

Converti en booléen :

false

Essayez-le →

<!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>



Valeur originale :

true

Converti en nombre :

1

Converti en chaîne :

"true"

Converti en booléen :

true

Essayez-le →

<!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>



Valeur originale :

0

Converti en nombre :

0

Converti en chaîne :

"0"

Converti en booléen :

false

Essayez-le →

<!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>



Valeur originale :

1

Converti en nombre :

1

Converti en chaîne :

"1"

Converti en booléen :

true

Essayez-le →

<!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>



Valeur originale :

"0"

Converti en nombre :

0

Converti en chaîne :

"0"

Converti en booléen :

true

Essayez-le →

<!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>



Valeur originale :

"000"

Converti en nombre :

0

Converti en chaîne :

"000"

Converti en booléen :

true

Essayez-le →

<!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>



Valeur originale :

"1"

Converti en nombre :

1

Converti en chaîne :

"1"

Converti en booléen :

true

Essayez-le →

<!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>



Valeur originale :

NaN

Converti en nombre :

NaN

Converti en chaîne :

"NaN"

Converti en booléen :

false

Essayez-le →

<!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>



Valeur originale :

Infinity

Converti en nombre :

Infinity

Converti en chaîne :

"Infinity"

Converti en booléen :

true

Essayez-le →

<!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>



Valeur originale :

-Infinity

Converti en nombre :

-Infinity

Converti en chaîne :

"-Infinity"

Converti en booléen :

true

Essayez-le →

<!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>



Valeur originale :

""

Converti en nombre :

0

Converti en chaîne :

""

Converti en booléen :

false

Essayez-le →

<!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>



Valeur originale :

"20"

Converti en nombre :

20

Converti en chaîne :

"20"

Converti en booléen :

true

Essayez-le →

<!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>



Valeur originale :

NaN

Converti en nombre :

"twenty"

Converti en chaîne :

"twenty"

Converti en booléen :

true

Essayez-le →

<!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>



Valeur originale :

[ ]

Converti en nombre :

0

Converti en chaîne :

""

Converti en booléen :

true

Essayez-le →

<!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>



Valeur originale :

[20]

Converti en nombre :

20

Converti en chaîne :

"20"

Converti en booléen :

true

Essayez-le →

<!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>



Valeur originale :

[10,20]

Converti en nombre :

NaN

Converti en chaîne :

"10,20"

Converti en booléen :

true

Essayez-le →

<!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>



Valeur originale :

["twenty"]

Converti en nombre :

NaN

Converti en chaîne :

"twenty"

Converti en booléen :

true

Essayez-le →

<!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>



Valeur originale :

["ten","twenty"]

Converti en nombre :

NaN

Converti en chaîne :

"ten,twenty"

Converti en booléen :

true

Essayez-le →

<!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>



Valeur originale :

function(){}

Converti en nombre :

NaN

Converti en chaîne :

"function(){}"

Converti en booléen :

true

Essayez-le →

<!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>



Valeur originale :

{ }

Converti en nombre :

NaN

Converti en chaîne :

"[object Object]"

Converti en booléen :

true

Essayez-le →

<!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>



Valeur originale :

null

Converti en nombre :

0

Converti en chaîne :

"null"

Converti en booléen :

false

Essayez-le →

<!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>



Valeur originale :

undefined

Converti en nombre :

NaN

Converti en chaîne :

"undefined"

Converti en booléen :

false

Essayez-le →

<!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>


Les valeurs entre guillemets indiquent des valeurs de chaîne.

Les Les valeurs rouges indiquent des valeurs auxquelles (certains) programmeurs ne pourraient pas s'attendre.