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

news2024/11/20 4:53:07

文章目录

  • 一、 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>

展示效果 :

在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

[密码学]OpenSSL实践篇

背景 最近在写Android abl阶段fastboot工具&#xff0c;需要我在Android代码中实现一些鉴权加解密相关的fastboot命令&#xff0c;里面用到了OpenSSL。我们先来实践一下OpenSSL在Linux系统中的指令。 OpenSSL官方网站&#xff1a;OpenSSL 中文手册 | OpenSSL 中文网 1. 查看…

【变量提升】关于JavaScript变量提升的理解,它导致了什么问题?

&#x1f601; 作者简介&#xff1a;一名大四的学生&#xff0c;致力学习前端开发技术 ⭐️个人主页&#xff1a;夜宵饽饽的主页 ❔ 系列专栏&#xff1a;JavaScript小贴士 &#x1f450;学习格言&#xff1a;成功不是终点&#xff0c;失败也并非末日&#xff0c;最重要的是继续…

带你摸透C语言相关内存函数

c语言中的小小白-CSDN博客c语言中的小小白关注算法,c,c语言,贪心算法,链表,mysql,动态规划,后端,线性回归,数据结构,排序算法领域.https://blog.csdn.net/bhbcdxb123?spm1001.2014.3001.5343 给大家分享一句我很喜欢我话&#xff1a; 知不足而奋进&#xff0c;望远山而前行&am…

vue2中如何实现添加一个空标签的效果,</>

前言&#xff1a; 众所周知&#xff0c;vue3突破了每一个vue文件中只能有一个根标签的限制&#xff0c;但是我们还有很多项目都是vue2的项目&#xff0c;如果让vue2中实现一个类似</>的效果呢&#xff0c;像react的16.2.0的版本之后&#xff0c;可以直接用<></&…

电脑音频显示红叉怎么办?这里提供四种方法

前言 如果你在系统托盘中看到音量图标上的红色X,则表示你无法使用音频设备。即使音频设备未被禁用,当你运行音频设备疑难解答时,仍然会看到此错误。 你的电脑将显示已安装高清音频设备,但当你将鼠标悬停在图标上时,它将显示未安装音频输出设备。这是一个非常奇怪的问题,…

C语言 指针(2)

文章目录 前言 一、数组名的理解 二、指针访问数组 三、一维数组传参的本质 四、冒泡排序 五、二级指针 六、指针数组 七、指针数组模拟二维数组 总结 前言 我们今天继续来了解指针的内容&#xff0c;让大家更加细致的理解到数组的含义 一、数组名的理解 之前我们在学习指针时…

王道OnlineJudge 14

题目 二叉树层次建树就是一层一层的建树&#xff0c;从左到右。随着纵向层次的深入&#xff0c;结点的数量变化规律为&#xff1a;1→2→4→8→16→32。 先画图&#xff0c;然后看图可闭眼写代码 右边为辅助队列&#xff0c;有多少个二叉树结点&#xff0c;就有多少个辅助队…

一个简单的Web UI自动化测试框架Java实现

&#x1f525; 交流讨论&#xff1a;欢迎加入我们一起学习&#xff01; &#x1f525; 资源分享&#xff1a;耗时200小时精选的「软件测试」资料包 &#x1f525; 教程推荐&#xff1a;火遍全网的《软件测试》教程 &#x1f4e2;欢迎点赞 &#x1f44d; 收藏 ⭐留言 &#x1…

口才教育:如何提升沟通技巧与表达能力

口才教育&#xff1a;如何提升沟通技巧与表达能力 口才教育在现代社会中扮演着越来越重要的角色。拥有良好的沟通技巧和表达能力对于个人的职业发展、人际交往乃至生活质量都至关重要。因此&#xff0c;如何有效地提升口才能力成为了许多人关注的焦点。本文将探讨口才教育的重…

java-可变参数

可变参数是什么&#xff1f; 可变参数就是指传入的参数个数是可变的&#xff0c;不是固定的 为什么要可变参数&#xff1f; 当我们要传入大量的形参时&#xff0c;我们就可以用到可变参数了 定义格式 数据类型...变量名; 例如int ...a; 可变参数的细节&#xff1a; &…

Vue2(五):收集表单数据、过滤器、内置指令和自定义指令

一、回顾 总结Vue监视数据 1.Vue监视数据的原理&#xff1a; 1.vue会监视data中所有层次的数据。 2.如何监测对象中的数据?通过setter实现监视&#xff0c;且要在new Vue时就传入要监测的数据。(1&#xff09;.对象中后追加的属性&#xff0c;Vue默认不做响应式处理(2&#…

java拷贝数组

package com.mohuanan.exercise;public class Exercise {public static void main(String[] args) {int[] arr {1, 2, 3, 4, 5, 6, 7, 8, 8}; //格式化快捷键 CTRL 加 Alt 加 L键// F1截图 F3贴图//调用 copyOfRangeint[] ints copyOfRange(arr, 3, 7);for (int i 0; i &l…

学习网络编程No.13【网络层IP协议理解】

引言&#xff1a; 北京时间&#xff1a;2024/3/5/8:38&#xff0c;早六加早八又是生不如死的一天&#xff0c;不过好在喝两口热水提口气手指还能跳动。当然起关键性作用的还是思维跟上了课程脑袋较为清晰&#xff0c;假如是听学校老师在哪里磨过来磨过去&#xff0c;那我倒头就…

三、HarmonyOS 应用开发入门之运行Hello World

目录 1、课程对象 1.1、有移动端开发经验 1.2、无移动端开发经验 1.3、对 HarmonyOS 感兴趣 2、DevEco Studio 的使用 2.1、DevEco Studio 的关键特性 智能代码编辑 低代码开发 多段双向实时预览 多端模拟仿真 2.2、安装配置 DevEco Studio 2.2.1、官网开发工具下载地…

Vue-Vben-Admin:中大型项目后台解决方案及如何实现页面反向传值

Vue-Vben-Admin&#xff1a;中大型项目后台解决方案及如何实现页面反向传值 摘要&#xff1a; Vue-Vben-Admin是一个基于Vue3.0、Vite、Ant-Design-Vue和TypeScript的开源项目&#xff0c;旨在为开发中大型项目提供一站式的解决方案。它涵盖了组件封装、实用工具、钩子函数、动…

Arduino ESP8266 SSD1306 硬件I2C+LittleFS存储GBK字库实现中文显示

Arduino ESP8266 SSD1306 硬件I2C+LittleFS存储GBK字库实现中文显示 📍相关篇《Arduino esp8266 软件I2C SSD1306 +LittleFS存储GBK字库实现中文显示》 🌼显示效果: ✨将部分函数重构,和上面相关篇的软件I2C通讯相关接口函数移植过来,除了汉字显示采用自己写的API函数外…

【数据结构取经之路】快速排序的非递归实现

概述 递归实现快速排序在一些场景下有栈溢出的风险&#xff0c;下面就谈谈如何用非递归的方法实现快速排序。 非递归实现的思想 递归实现与非递归实现快速排序的本质是一致的&#xff0c;效率并不会因为用了非递归实现而有所提升。递归实现快速排序的本质就在于通过递归&…

Linux系统目录结构详细介绍

目录 一、根目录&#xff08;/&#xff09; 二、/bin 三、/boot 四、/dev 1.设备文件类型&#xff1a; 2.常见设备文件&#xff1a; 五、/etc 六、/home 七、/root 八、/run 九、/sbin 十、 /tmp 十一、/usr 十二、/var Linux系统目录结构是一种层次化的文件系…

【数据结构】Set的使用

文章目录 一、Set的使用1.Set的常用方法&#xff1a;1.boolean add(E e)2.void clear()3.boolean contains(Object o)4.boolean remove(Object o)5.int size()6.boolean isEmpty()7.Object[] toArray()8.boolean containsAll(Collection<?> c)9.boolean addAll(Collecti…

leetcode 热题 100_删除链表的倒数第 N 个结点

题解一&#xff1a; 递归&#xff1a;利用递归栈逆向遍历链表&#xff0c;并用全局变量记录当前遍历的是倒数第几位节点&#xff0c;当遍历到待删节点的上一位节点时&#xff0c;node.nextnode.next.next删除待删节点。需要注意当删除的是头节点时&#xff0c;直接return head.…