×

Web前端开发:如何在 JavaScript 中将数字转换为字符串

作者:Terry2022.09.02来源:Web前端之家浏览:1602评论:0
关键词:Javascript

500.jpg

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及其类型时,结果分别为10number。转换后,结果分别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()适用于undefinednull值,而toString()没有。因此,如果您的值应该包含一个数字,但您希望在将其转换为字符串时安全,则可以使用String().

至于字符串插值和字符串连接,它们最适合在字符串中使用数字时使用。否则,使用这些方法会降低代码的可读性。


您的支持是我们创作的动力!
温馨提示:本文作者系Terry ,经Web前端之家编辑修改或补充,转载请注明出处和本文链接:
https://www.jiangweishan.com/article/jszofi20220902.html

网友评论文明上网理性发言 已有0人参与

发表评论:

最新留言

  • jianj

    node看上有点复杂...

  • 访客

    正好遇到,谢谢分享...

  • jimmy

    这个很有趣,国内SEO更多的是百度...

  • jenny

    VUE的总结的不错啊,收藏了。下次搞点React的啊...

  • jenny

    win7最经典,想当初win8出来后都没它好用,怀恋经典。。。...

  • Terry

    谢谢提醒,插件已经修复。...

  • 访客

    士大夫士大夫...

  • 访客

    用這甚麼顏色...

首页|JavaScript|HTML|HTML4|HTML5|CSS3|开发工具|性能优化|移动开发|前端教程|性能优化|开发工具|酷站欣赏|UI设计|前端教程

Copyright © 2023 Web前端之家(www.jiangweishan.com) 版权所有 All Rights Reserved.
粤ICP备12067512号-1

Copyright Your WebSite.Some Rights Reserved.

Powered By Z-BlogPHP 1.7.2