Javascript类型转换详解

 更新时间:2022年01月16日 11:38:44   作者:yooo*  
这篇文章主要为大家介绍了Javascript类型转换,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助

类型转换

1.String->Number

const string = "99";
// 隐式转换
console.log(string * 1 + 77);
// 显式转换
console.log(Number(string) + 77);

在这里插入图片描述

2.Number->String

const number = 66;
console.log(typeof number);
// 隐式转换
console.log(typeof (number + ""));
// 显式转换
console.log(typeof String(number));

在这里插入图片描述

3.混合String->Number

把位于开头的数值字符串转为数值型

const string = "66.66alison";
console.log(parseInt(string));
console.log(parseFloat(string));

在这里插入图片描述

4.String->Array

const name = "alison";
console.log(name.split(""));

在这里插入图片描述

5.Array->String

const array = ["yooo", "alison", "ruby", "andy"];
console.log(array.join(""));
console.log(array.join("&"));

在这里插入图片描述

6.Array->Number

空数组为0,x单元素数组为x,多元素数组为NaN

console.log(Number([]));
console.log(Number([3]));
console.log(Number([1, 2, 3]));

在这里插入图片描述

7.toString()

主要用于将Array(由逗号隔开)、Boolean、Date、Number等对象转换成String。

const array = ["yooo", "alison", "ruby", "andy"];
console.log(array.toString());
const number = 99;
console.log(typeof number.toString());

在这里插入图片描述

8.Boolean隐式转换

比较和运算是两件事

(1)比较

在将boolean与number、string比较时,会隐式地将boolean中的true转为1、false转为0

let number = 99;
console.log(number == true);

在这里插入图片描述

let hd = '0';
let hd2 = "1";
let hd3 = "99";
console.log(hd == false);
console.log(hd2 == true);
console.log(hd3 == true);

在这里插入图片描述

(2)运算

在运算中string和number会被隐式转换为boolean

let number = 99;
if (number) console.log("number");

在这里插入图片描述

(3)其他类型转换为Boolean

console.log(Boolean([]));
console.log(Boolean({}));

在这里插入图片描述

 
数值类型0其他
字符串类型空串其他
引用类型数组和对象 

9.Boolean显式转换

(1)!!

!先将number转换为boolean类型,然后再取反

!!相当于把数值转为布尔

(2)构造函数 Boolean()

// 数值
let number = 0;
number = !!number;
console.log(Boolean(number));
// 字符串
let string = "Alison";
console.log(!!string);
console.log(Boolean(string));
// 数组
let array = [];
console.log(!!array);
console.log(Boolean(array));
// 对象
let object = {};
console.log(!!object);
console.log(Boolean(object));
// 日期
let date = new Date();
console.log(!!date);
console.log(Boolean(date));

总结

本篇文章就到这里了,希望能够给你带来帮助,也希望您能够多多关注脚本之家的更多内容!

相关文章

  • JavaScript网络请求工具库axios使用实例探索

    JavaScript网络请求工具库axios使用实例探索

    这篇文章主要为大家介绍了JavaScript网络请求工具库axios使用实例探索,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2024-01-01
  • 微信小程序支付功能完整流程记录(前端)

    微信小程序支付功能完整流程记录(前端)

    微信小程序的商户系统一般是以接口的形式开发的,小程序通过调用与后端约定好的接口进行参数的传递以及数据的接收,下面这篇文章主要给大家介绍了关于微信小程序支付功能(前端)的相关资料,需要的朋友可以参考下
    2023-02-02
  • JavaScript canvas实现动态点线效果

    JavaScript canvas实现动态点线效果

    这篇文章主要为大家详细介绍了JavaScript canvas实现动态点线效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-08-08
  • JS中frameset框架弹出层实例代码

    JS中frameset框架弹出层实例代码

    这篇文章主要介绍了JS中frameset框架弹出层实例代码 的相关资料,需要的朋友可以参考下
    2016-04-04
  • 深入理解ES6 Promise 扩展always方法

    深入理解ES6 Promise 扩展always方法

    本篇文章主要介绍了ES6 Promise 扩展always方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-09-09
  • javascript针对不确定函数的执行方法

    javascript针对不确定函数的执行方法

    这篇文章主要介绍了javascript针对不确定函数的执行方法,实例分析了eval函数及符号属性两种执行方式,需要的朋友可以参考下
    2015-12-12
  • js 索引下标之li集合绑定点击事件

    js 索引下标之li集合绑定点击事件

    本文通过一段实例代码给大家讲解了js索引下标之li集合绑定点击事件的相关知识,代码简单易懂,非常不错,具有参考借鉴价值,需要的朋友参考下吧
    2018-01-01
  • js apply/call/caller/callee/bind使用方法与区别分析

    js apply/call/caller/callee/bind使用方法与区别分析

    js apply/call/caller/callee/bind使用方法与区别分析,需要的朋友可以参考下。
    2009-10-10
  • JavaScript new对象的四个过程实例浅析

    JavaScript new对象的四个过程实例浅析

    这篇文章主要介绍了JavaScript new对象的四个过程,结合实例形式简单分析了javascript面向对象程序设计中new对象的四个过程相关原理与实现方法,需要的朋友可以参考下
    2018-07-07
  • js抽奖转盘实现方法分析

    js抽奖转盘实现方法分析

    这篇文章主要介绍了js抽奖转盘实现方法,结合实例形式分析了js抽奖转盘原理、实现方法与操作注意事项,需要的朋友可以参考下
    2020-05-05

最新评论