【JavaScript】数据类型转换 ① ( 隐式转换 和 显式转换 | 常用的 数据类型转换 | 转为 字符串类型 方法 )

文章目录

  • 一、 JavaScript 数据类型转换
    • 1、数据类型转换
    • 2、隐式转换 和 显式转换
    • 3、常用的 数据类型转换
    • 4、转为 字符串类型 方法





一、 JavaScript 数据类型转换



1、数据类型转换


在 网页端 使用 HTML 表单浏览器输入框 prompt 函数 , 接收的数据 是 字符串类型 变量 ,

该 字符串类型 变量 无法 直接进行使用 , 如 : 与 number 数字类型 变量 相加 , 与 boolean 布尔类型 进行 逻辑运算 ;

将 字符串类型 变量 先转为 其它数据类型 , 然后再与对应 数据类型 进行计算 ;


2、隐式转换 和 显式转换


在 JavaScript 中 , 变量 的 数据类型 可以 互相进行转换 , 数据类型 转换 有 两种方式 :

  • 隐式转换 : 在 指定的 使用场景 进行 自动 转换 ;
  • 显式转换 : 主动进行 数据类型转换 ;

3、常用的 数据类型转换


常用的 数据类型转换 :

  • 转为 字符串类型 : 输出 文本 / 日志 , 网页 中 展示信息 , 都是字符串格式 , 此时需要将 其它类型的数据 转为 字符串类型 ;
  • 转为 数字类型 : 进行 数值计算时 , 需要将 其它类型数据 , 转为 数字类型 ;
  • 转为 布尔类型 : 进行 逻辑运算 或 条件控制 / 循环控制 时 , 需要将 其它类型数据 转为 布尔类型 值 使用 ;

4、转为 字符串类型 方法


转为 字符串类型 方法 :
-加号拼接字符串 ( 隐式转换 ) :使用 加号 + 运算符 进行 字符串拼接时 , 会自动将 被拼接的 数据值 转为 字符串类型 , 在下面的代码中 , 自动将 数字类型的 num 转为 字符串类型 , 然后再进行 字符串拼接 ;

var num = 1;
console.log(num)
console.log("" + num)
  • toString() 函数 ( 显式转换 ) : 调用 要转换的 值 的 toString 函数 , 可以将 该值转为 字符串 类型 , 下面的代码中调用了 number 类型的变量 num 的 toString 函数 , 将 数字类型 转为 字符串类型 ;
var num = 1;
console.log(num.toString())
console.log(typeof num.toString())
  • String() 构造函数 ( 显式转换 ) : 将 要转换的值 传入 String 构造函数中 , 就可以将 该值 转为 字符串类型 ;
var num = 1;
console.log(String(num))
console.log(typeof String(num))

完整代码示例 :

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <!-- 设置 meta 视口标签 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no,maximum-scale=1.0,minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>JavaScript</title>
    <style></style>
    <script>
        var num = 1;
        console.log(num)
        console.log("" + num)

        console.log(num.toString())
        console.log(typeof num.toString())

        console.log(String(num))
        console.log(typeof String(num))
    </script>
</head>

<body>
</body>

</html>

展示效果 :

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/454227.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

docker容器镜像管理+compose容器编排(持续更新中)

目录 一、 Docker的基本组成 二、 容器和镜像的关系 2.1 面向对象角度 2.2 从镜像容器角度 三、 容器命令 3.1 使用Ubuntu 3.1.1 下载镜像 3.1.2 新建和启动容器 run 3.1.3交互式 compose编排与部署 1. docker-compose部署 2. docker-compose.yml模板 …

社区维修平台|基于SpringBoot+ Mysql+Java+JSP技术的社区维修平台设计与实现(可运行源码+数据库+设计文档+部署说明+视频演示)

推荐阅读100套最新项目 最新ssmjava项目文档视频演示可运行源码分享 最新jspjava项目文档视频演示可运行源码分享 最新Spring Boot项目文档视频演示可运行源码分享 目录 前台功能效果图 住户后台功能 维修员前台功能 维修员后台功能 管理员功能登录 系统功能设计 数据库E…

数据结构:哈希表

1.散列表的概念: 根据要存储的数据记录的关键字值计算出应该存储的位置 基本思想:记录的存储位置与关键字之间存在对应关系 Loc(i)H(keyi)-----等号右边就称之为hash函数.等号左边就是对应的存储位置; 2.哈希表的优缺点 这个就是散列表的特点:查找效率高,空间利用率低;&am…

java-双列集合

什么是双列集合&#xff1f; 集合中每次存的数据是成对存入的 以及它的特点是什么&#xff1f; 特别注意&#xff1a;键不可重复&#xff0c;值可以 Map是双列集合的顶层接口 Map 它有哪些方法呢&#xff1f; Map的常用API 添加 添加操作的代码如下 我们要明白一些细节&…

ChatGPT浪潮来袭!谁先掌握,谁将领先!

任正非在接受采访时说 今后职场上只有两种人&#xff0c; 一种是熟练使用AI的人&#xff0c; 另一种是创造AI工具的人。 虽然这个现实听起来有些夸张的残酷&#xff0c; 但这就是我们必须面对的事实 &#x1f4c6; 对于我们普通人来说&#xff0c;我们需要努力成为能够掌握…

uniapp开发的跳转到小程序

uniapp开发的h5跳转到小程序 https://www.cnblogs.com/xiaojianwei/p/16352698.html官方&#xff1a;使用 URL Scheme 打开小程序 https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/url-scheme.html 链接代码 <a href"weixin://dl/business/…

AHU 数据库 实验三

《数据库》实验报告 【实验名称】 实验3 数据库的连接查询 【实验目的】 1. 熟悉基本的连接查询的概念和作用&#xff1b; 2. 了解数据库管理系统DBMS 实现连接查询的基本方法&#xff1b; 3. 掌握SQL语言连接查询语句的语法和功能&#…

备战python蓝桥杯1.0

1.输入输出 1.1输入一行 字符组 # 输入一个字符串&#xff0c;分割成单个字符存到列表a a[i for i input()]1.2输入一行 一组数 #输入一组数&#xff0c;赋值给列表a alist(map(int,input().split()))1.3输入多行 字符串 #先输入n&#xff0c;再输入n行的字符串&#xff0c;…

算法提高之楼兰图腾(树状数组)

楼兰图腾(树状数组) 核心算法&#xff1a;树状数组 将下标转化为二进制 例如11100100 父节点下标x 子节点下标i 由下图可知 每一个数都可以由其子节点**(如果有)**求和得到**由父节点找子节点&#xff1a;**每个子节点下标 –> x – 1 – lowbit(x – 1)由子节点找父节点&am…

前端跨页面通信的几种方式---同源

参考链接 1、LocalStorage:当 LocalStorage 变化时&#xff0c;会触发storage事件。利用这个特性&#xff0c;我们可以在发送消息时&#xff0c;把消息写入到某个 LocalStorage 中&#xff1b;然后在各个页面内&#xff0c;通过监听storage事件即可收到通知。 2、BroadCast C…

SpringBoot+Vue项目报错(问题已解决)

1、错误日志 2、分析原因&#xff1a; JWT strings must contain exactly 2 period characters. Found: 0 JWT字符串必须包含2个句号字符。发现:0 分析&#xff1a;可以判断出大概可能是token格式出现了问题 3、参考 http://t.csdnimg.cn/hfEiY 4、检查后端代码是否出现问…

酷开科技以消费者需求为导向冲刺OTT行业的星辰大海

通过大屏营销、互动营销等方式&#xff0c;提升品牌认知度和市场竞争力。酷开科技始终坚持以消费者的需求为导向&#xff0c;致力于为品牌方和消费者搭建高效、准确的沟通桥梁&#xff0c;开创OTT大屏营销新纪元。 伴随技术发展&#xff0c;智能电视已经从“尝鲜”变成了主流产…

数据结构与算法----复习Part 14 (树与二叉树)

本系列是算法通关手册LeeCode的学习笔记 算法通关手册&#xff08;LeetCode&#xff09; | 算法通关手册&#xff08;LeetCode&#xff09; (itcharge.cn) 目录 一&#xff0c;树&#xff08;Tree&#xff09; 树的相关术语 节点间关系 树的其他术语 二&#xff0c;二叉…

ISIS单区域实验简述

ISIS 中间系统到中间系统&#xff0c;也是链路状态协议&#xff0c;工作在数据链路层&#xff0c;不依赖IP地址&#xff1b;与OSPF一样采用最短路径SPF算法&#xff0c;收敛速度快。 实验基础配置&#xff1a; r1: sys sysname r1 undo info enable int g0/0/0 ip add 12.1.1.1…

使用vue动态在列表中添加或者删除某一行

** 使用vue动态在列表中添加或者删除某一行 ** 先看一下展示的效果&#xff1a; 好了上代码&#xff1a; 样式界面&#xff1a; <template><div class"container"><h4 style"margin-left: 20px;">线路停靠站站点</h4><el-b…

JS ATM练习案例(复习循环知识)

需求&#xff1a;用户可以选择存钱、取钱、查看余额和退出功能。 分析&#xff1a;1循环时反复出现提示框&#xff0c;所以提示框写到循环里面。 2.退出的条件是4&#xff0c;所以是4就会结束循环 3.提前准备一个金额预存储 4取钱为减法操作&#xff0c;存钱为加法操作&#xf…

访问学者申请记|美国首所翻译博士点

N老师出国访学的目的一方面是开拓眼界&#xff0c;另一方面也是为完成翻译方向的博士论文创造更好的条件。最终我们获得美国纽约州立大学宾汉姆顿分校的邀请函&#xff0c;该校的“翻译研究和教学项目”&#xff08;TRIP&#xff09;是美国高校设立的第一个翻译博士学位项目&am…

electron + vtkjs加载模型异常,界面显示类似于图片加载失败的图标

electron vtkjs加载模型显示异常&#xff0c;类似于图片加载失败的效果&#xff0c;如上图。 electron开发版本&#xff1a;13。 解决方法&#xff1a;升级electron版本号。 注意&#xff1a;win7最高兼容electron 22版本。

哪个骨传导蓝牙耳机的好?独家揭秘六大选购技巧

在科技飞速前进的今天&#xff0c;骨传导蓝牙耳机以独特的听觉技术逐渐进入大众视野&#xff0c;赢得了众多消费者的青睐。作为一名资深的数码爱好者&#xff0c;我最近频繁地收到朋友们的咨询&#xff0c;他们希望了解哪个骨传导蓝牙耳机的好&#xff1f;对于初入数码圈的朋友…

AI知识库也太方便了吧,中小型企业都要知道它!

生活在这个信息爆炸的时代&#xff0c;信息的获取变得前所未有的方便&#xff0c;但随之而来的却是信息筛选和管理的难题。对于中小型企业来说&#xff0c;如何有效运用自身积累的各类信息&#xff0c;直接影响着企业的运营效率和市场竞争力。而这&#xff0c;正是AI知识库可以…