JavaScript中其他数据类型转换为字符串类型

将 Number 类型转换为字符串类型。

将 Boolean 类型转换为字符串类型。

将 undefined 类型转换为字符串类型。

将 null 类型转换为字符串类型。

在 JavaScript 中如果想将以上的四种基本数据类型转换为字符串类型, 常用的方法有三种。

对于 Number 类型和 Boolean 类型来说, 可以通过 变量名称.toString() 的方式来转换。

可以通过 String(常量 or 变量); 转换为字符串。

还可以通过 变量 or 常量 + "" / 变量 or 常量 + '' 转换为字符串。

将 Number 类型转换为字符串类型。在谷歌浏览器的控制台中如果是 Number 类型是蓝色的。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        let value = 123;
        console.log(value);
        console.log(typeof value);
    </script>
</head>
<body>
</body>
</html>

以下代码的含义: 将 value 变量中存储的数据拷贝一份, 然后将拷贝的数据转换为字符串之后返回，在谷歌浏览器的控制台中如果是 String 类型是灰色的。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        let value = 123;
        let str = value.toString();
        console.log(str);
        console.log(typeof str);
    </script>
</head>
<body>
</body>
</html>

注意点: 变量名称.toString 是对拷贝的数据进行转换, 所以不会影响到原有的数据。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        let value = 123;
        console.log(value);
        console.log(typeof value);
        let str = value.toString();
        console.log(str);
        console.log(typeof str);
        console.log(value);
        console.log(typeof value);
    </script>
</head>
<body>
</body>
</html>

注意点: 不能使用常量直接调用 toString 方法, 因为常量是不能改变的。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        let str2 = 123.toString();
    </script>
</head>
<body>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        let value = 123;
        console.log(value);
        console.log(typeof value);
        
        let str = String(value);
        console.log(str);
        console.log(typeof str);
    </script>
</head>
<body>
</body>
</html>

注意点: 变量名称.toString() 的方式前面不能是 常量, 因为常量不能被改变，String(常量 or 变量), 因为是根据传入的值重新生成一个新的值, 并不是修改原有的值。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        let str = String(123);

        console.log(str);
        console.log(typeof str);
    </script>
</head>
<body>
</body>
</html>

+ '' 或者 +"" 底层的本质其实就是调用 String() 函数。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        let value = 123;
        let strOne = value + '';
        let strTwo = value + "";

        console.log(strOne);
        console.log(strTwo);

        console.log(typeof strOne);
        console.log(typeof strTwo);
    </script>
</head>
<body>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        let str = 123 + '';

        console.log(str);
        console.log(typeof str);
    </script>
</head>
<body>
</body>
</html>

将 Boolean 类型转换为字符串类型。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        let value = true;
        console.log(value);
        console.log(typeof value);

        let str = value.toString();
        console.log(str);
        console.log(typeof str);
    </script>
</head>
<body>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        let value = true;
        console.log(value);
        console.log(typeof value);

        let str = String(value);
        console.log(str);
        console.log(typeof str);
    </script>
</head>
<body>
</body>
</html>

将 undefined 类型转换为字符串类型。以下代码的含义: 根据传入的数据重新生成一个新的字符串。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        let value = undefined;
        console.log(value);
        console.log(typeof value);

        let str = String(value);
        console.log(str);
        console.log(typeof str);
    </script>
</head>
<body>
</body>
</html>

将 null 类型转换为字符串类型。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        let value = null;
        console.log(value);
        console.log(typeof value);

        let str = String(value);
        console.log(str);
        console.log(typeof str);
    </script>
</head>
<body>
</body>
</html>