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
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
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).
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>
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:
Description
Renvoie un nombre, converti à partir de son argument
Analyse une chaîne et renvoie un nombre à virgule flottante
Analyse une chaîne et renvoie un entier
L'opérateur unaire + peut être utilisé pour convertir une variable en nombre :
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) :
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>
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 :
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.
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>
Dans le chapitre Méthodes numériques, vous vous trouverez d'autres méthodes pouvant être utilisées pour convertir des nombres en cordes :
Renvoie une chaîne, avec un nombre arrondi et écrit en notation exponentielle.
Renvoie une chaîne, avec un nombre arrondi et écrit avec un nombre spécifié de décimales.
Renvoie une chaîne, avec un nombre écrit avec une longueur spécifiée
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
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.
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 :
Obtenez le jour sous forme de nombre (1-31)
Obtenez le jour de la semaine un numéro (0-6)
Obtenez l'année à quatre chiffres (aaaa)
Obtenez l'heure (0-23)
Obtenez les millisecondes (0-999)
Obtenez les minutes (0-59)
Obtenez le mois (0-11)
Obtenez les secondes (0-59)
Obtenez l'heure (millisecondes depuis le 1er janvier 1970)
La méthode globale Number()
peut également convertir des booléens en nombres.
Number(false) // returns 0
Number(true) // returns 1
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"
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>
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"
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.