JavaScript 非常灵活，并提供了许多不同的方法来在数据类型之间进行转换。在这个简短的教程中，我们将了解如何在 JavaScript 中将数字转换为字符串。您可能希望这样做是为了使数字数据对用户更具可读性——例如，将数字显示为句子的一部分。
本教程探讨了四种在 JavaScript 中将数字转换为字符串的方法。
使用插值将数字转换为字符串
插值可能是在字符串中使用数字的最易读的方式。您可以使用此方法将其插入到字符串中，而不是手动将数字转换为字符串。
要使用插值，请用反引号 ( `) 包装一个字符串。然后，在字符串中，您可以使用`${}`.
例如：
const number = 99;
console.log(`${number} percent of people love JavaScript`); // "99% of people love JavaScript"由于正在登录到控制台的字符串是用反引号包裹的，因此您可以使用${}.
您可以在下面的演示中看到示例。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div>
<label for="number">Enter a number</label>
<input type="number" name="number" id="number" />
</div>
<p id="result"></p>
<script>
const input = document.querySelector("#number");
const resultElm = document.querySelector("#result");
input.addEventListener('keyup', function (e) {
resultElm.textContent = `${input.value} percent of people love JavaScript`
});
</script>
</body>
</html>使用字符串连接将数字转换为字符串
第二种方法是字符串连接。您可以使用运算符将数字转换为字符串+。
例如：
console.log(10 + "USD"); //"10USD" console.log(10 + ""); //"10"
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div>
Variable Value: <span id="variableValue"></span>
</div>
<div>
Original Type: <span id="originalType"></span>
</div>
<div>
After Converting Value: <span id="afterConvertValue"></span>
</div>
<div>
Type After Converting with String Concatenation: <span id="afterConvert"></span>
</div>
<script>
const number = 10;
document.getElementById("variableValue").textContent = number;
document.getElementById("originalType").textContent = typeof number;
const numberStr = number + '';
document.getElementById("afterConvertValue").textContent = numberStr;
document.getElementById("afterConvert").textContent = typeof numberStr;
</script>
</body>
</html>尽管这种方法很有效（因为它需要最少的代码），但它会使代码的可读性降低。
字符串连接警告
当对多个数字使用此方法时，可能会发生意外结果。
例如：
const a = 2000; const b = 468; console.log(a + b + " motorway"); // "2468 motorway"
由于a + b在到达字符串之前首先进行评估，因此该操作是数字加法而不是字符串连接。一旦达到字符串变量或文字，操作就变成了字符串连接。所以，结果是2468 motorway。
但是，请尝试将代码更改为以下内容：
const a = 2000;
const b = 468;
console.log("it is " + a + b + " motorway"); // "it is 2000468 motorway"因为"it is" + a首先被评估，所以该+运算符用于表达式其余部分的字符串连接。a因此，它不再像前面的示例那样在and之间进行加法运算b，而是变成了两者之间的字符串连接操作。
这可以使用括号来解决：
const a = 2000;
const b = 468;
console.log("it is " + (a + b) + " motorway"); // "it is 2468 motorway"a和之间的加法b首先执行，这导致两个变量之间的加法运算。然后，字符串连接用于表达式的其余部分，因为第一个操作数是"it is"。
使用 toString 将数字转换为字符串
第三种方法是使用toString()方法。此方法适用于所有JavaScript 数据类型，包括数字。它转换它所使用的数字的值并返回它。
例如：
const number = 10; console.log(number); // 10 console.log(typeof number); // "number" const numberStr = number.toString(); console.log(numberStr); // "10" console.log(typeof numberStr); // "string"
此示例显示与第一种方法相同的结果。您还可以在下面演示中看到它的实际效果。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div>
Variable Value: <span id="variableValue"></span>
</div>
<div>
Original Type: <span id="originalType"></span>
</div>
<div>
After Converting Value: <span id="afterConvertValue"></span>
</div>
<div>
Type After Converting with toString(): <span id="afterConvert"></span>
</div>
<script>
const number = 10;
document.getElementById("variableValue").textContent = number;
document.getElementById("originalType").textContent = typeof number;
const numberStr = number.toString();
document.getElementById("afterConvertValue").textContent = numberStr;
document.getElementById("afterConvert").textContent = typeof numberStr;
</script>
</body>
</html>使用字符串将数字转换为字符串
第四种方法是使用String()构造函数。此函数接受要转换的变量作为第一个参数。它将参数转换为字符串并返回。
例如：
const number = 10; console.log(number); // 10 console.log(typeof number); // "number" const numberStr = String(number); console.log(numberStr); // "10" console.log(typeof numberStr); // "string"
在控制台中记录 的值number及其类型时，结果分别为10和number。转换后，结果分别10为字符串和string。
您可以在下面的演示中看到示例。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div>
Variable Value: <span id="variableValue"></span>
</div>
<div>
Original Type: <span id="originalType"></span>
</div>
<div>
After Converting Value: <span id="afterConvertValue"></span>
</div>
<div>
Type After Converting with String(): <span id="afterConvert"></span>
</div>
<script>
const number = 10;
document.getElementById("variableValue").textContent = number;
document.getElementById("originalType").textContent = typeof number;
const numberStr = String(number);
document.getElementById("afterConvertValue").textContent = numberStr;
document.getElementById("afterConvert").textContent = typeof numberStr;
</script>
</body>
</html>总结
本教程向您展示了四种可用于在 JavaScript 中将数字转换为字符串的方法。尽管这些方法在与数字一起使用时可以产生相同的结果，但在某些情况下，一种方法会比其他方法更好。
String()使用and之间的主要区别在于toString()它String()适用于undefined和null值，而toString()没有。因此，如果您的值应该包含一个数字，但您希望在将其转换为字符串时安全，则可以使用String().
至于字符串插值和字符串连接，它们最适合在字符串中使用数字时使用。否则，使用这些方法会降低代码的可读性。
网友评论文明上网理性发言 已有0人参与
发表评论: