首页 > 编程语言 >JavaScript 中 toString 的奇妙使用

JavaScript 中 toString 的奇妙使用

时间:2024-05-27 13:33:35浏览次数:32  
标签:10 const 进制 16 JavaScript 奇妙 toString 转为

JavaScript 中的toString()方法,我们通常会一些其他类型的变量,转为字符串类型。但这里还有一些其他奇妙的用法。

不同的类型调用 toString() 会得到不同的结果。我们来一一分析下。

1. 函数类型

我们开发者自定义的函数,和 JavaScript 官方内置的函数,在调用 toString 时,输出是不一样的。

function user() {
  const name = "蚊子";
}
user.toString(); // 'function user() {const name = "蚊子";}'
Math.abs.toString(); // 'function abs() { [native code] }'

自定义函数在调用toString()时,输出的是函数体的内容。而内置函数,则输出的是native code

2. Boolean 类型

boolean 类型的最简单,就是把 true 和 false 转为对应的字符串。

const yes = true;
const no = false;

yes.toString(); // 'true'
no.toString(); // 'false'

3. 数字类型

可以把数字转为对应进制的字符串toString(radix),传入的参数为要转换的进制,范围是2~36之间,若不传参,则默认转为 10 进制的字符串。

const count = 10;

console.log(count.toString()); // 输出 '10'
console.log((17).toString()); // 输出 '17'
console.log((17.2).toString()); // 输出 '17.2'

const x = 6;

console.log(x.toString(2)); // 转为2进制,输出 '110'
console.log((254).toString(16)); // 转为16进制,输出 'fe'

console.log((-10).toString(2)); // 转为2进制,输出 '-1010'
console.log((-0xff).toString(2)); // 16进制转为2进制,输出 '-11111111'

还有一个常用的方法parseInt(stirng, radix),把当前字符串以 radix 指定的进制,转为 10 进制的数字。

parseInt("14", 8); // 8进制的14转为10进制,输出12
parseInt("a", 16); // 16进制的a转为10进制,输出10
parseInt("1011", 2); // 2进制的1011转为10进制,输出11

我们把 parseInt()toString()进行结合,可以在2~36进制之间任意转换。

const transform = (base, from, to) => {
  if (from < 2 || from > 36 || to < 2 || to > 36) {
    throw new RangeError("transform radix argument must be between 2 and 36");
  }
  return parseInt(base, from).toString(to);
};

先将 base 转为 10 进制,然后再通过 toString()转为对应的进制。

transform(14, 8, 16); // 将8进制的14转为16进制,输出'c'
transform(1011, 2, 16); // 将2进制的1011转为16进制,输出'b'
transform("ff", 16, 2); // 将16进制的‘ff’转为2进制,输出'11111111'

4. 数组类型

数组类型不是基本类型,它会把每项按照上面的规则转为字符串后,以英文逗号,拼接数组的所有项,若数组有多层,则展开所有。

const arr = [
  123.45,
  () => {
    const a = "这是自定义函数";
  },
  Math.abs,
  true,
  false,
  "abc",
  ["arr", 1, 2],
  null,
  undefined,
  1,
];

arr.toString(); // '123.45,() => {const a = "这是自定义函数";},function abs() { [native code] },true,false,abc,arr,1,2,,,1'

输出的字符串比较长,不过我们也能发现其中的几个特点:

  1. 这里把数组中的所有项均列了出来,没有更深层的数组;
  2. 英文逗号,拼接展开的所有项;
  3. null 和 undefined 在转为字符串后丢失,但位置还在;

5. 日期对象类型

Date 对象,toString() 方法返回一个表示该对象的字符串。该 toString 方法总是返回一个美式英语日期格式的字符串。若 Date 对象不是合法的日期格式,则会返回Invalid Date

const date = new Date();
date.toString(); // Mon May 27 2024 09:10:33 GMT+0800 (中国标准时间)

new Date("2024/13").toString(); // Invalid Date

6. 孪生方法 toLocaleString()

有的类型的数据,支持toLocaleString()方法,返回的数据与toString()稍微有点区别:

6.1 数字类型的数据

会把数字类型的数据转为特定语言环境表示的字符串,不传参则默认是美式英语环境。我们可以利用这个特性,把数字转为带千分位的数字字符串。

(12345).toLocaleString(); // '12,345'
(34566789).toLocaleString(); // '34,566,789'

6.2 Date 对象的数据

将 Date 对象转为本地格式化的字符串;

new Date().toLocaleString(); // '2024/5/27 10:27:04'

7. 总结

toString()不单单是将变量转为字符串那么简单,不同类型的数据使用时,会有不同的效果。

欢迎关注我的公众号:前端小茶馆。

前端小

标签:10,const,进制,16,JavaScript,奇妙,toString,转为
From: https://www.cnblogs.com/xumengxuan/p/18215309

相关文章

  • (读后分享)移动Web前端高效开发实战:HTML 5 + CSS 3 + JavaScript + Webpack + React Nat
    链接:pan.baidu.com/s/1tIHXj9HmIYojAHqje09DTA?pwd=jqso提取码:jqsoHTML5新特性与应用:介绍HTML5的新特性,包括语义化标签、本地存储、设备兼容、连接特性等,并讲解如何在移动Web前端开发中充分利用这些特性提升用户体验。CSS3样式与动画设计:详细讲解CSS3的样式设计和动画效果,包......
  • 【精简笔记】JavaScript基础内容大总结
    往期文章目录【精简笔记】JavaScript基础内容第一天【精简笔记】JavaScript基础内容第二天【精简笔记】JavaScript基础内容第三天【精简笔记】JavaScript基础内容第四天【精简笔记】JavaScript基础内容第五天文章目录往期文章目录前言一、JavaScript的书写位置1.......
  • JavaScript 新特性:新增声明命令与解构赋值的强大功能
    个人主页:学习前端的小z个人专栏:JavaScript精粹本专栏旨在分享记录每日学习的前端知识和学习笔记的归纳总结,欢迎大家在评论区交流讨论!ES5、ES6介绍文章目录......
  • JavaScript 系列教程 III JavaScript 代码质量
    ......
  • JavaScript-数组的增删改查
    数组的操作一共有四种:查询数组数据修改数组中元素的值数组添加新的数据删除数组中的元素数组的初始化有些编程语言的数组初始化是用{}包着的,而JS的数组初始化用[]letnum=[2,6,1,77,52,25,7];数组的查询想要具体查询数组中的某个元素可以用数组名num[i]表示查询数组n......
  • 莫名奇妙的'??'引起的APK无法在手机上运行
    用Hbuilder-X开发的APK在浏览器和其自带的模拟器上都能运行,但是打完包之后放到真机上某些功能就不能运行了,这些功能涉及到一个几千个元素的二维数组,通过不断缩小检查范围,发现是88到95之间的元素引起的,仔细观察,原来错误是这个样子的:[ ...,[  93 ,  "  sxx......
  • JavaScript事件监听
    在JavaScript中,事件监听是一种重要的机制,用于在特定事件发生时执行特定的代码。这些事件可以是用户的交互行为(如点击、鼠标移动等),也可以是浏览器的一些特定行为(如页面加载完成、窗口大小改变等)。事件监听通常使用addEventListener方法实现。以下是一个基本的示例:javascript//......
  • 学习javascript的数组
    1.什么是数组?数组:(Array)是一种数据类型,属于引用数据类型。作用:在单个变量名下存储多个数据2.声明语法let数组名=[数据1,数据2......];注意事项:数组是按照顺序保存(是有序的),所以,每一个数据都有自己的编号。编号从0开始,数据的编号经常称为索引或下标。数组可以存储任意......
  • 深入理解ECMAScript:JavaScript的规范与实践
    引言在当今的Web开发领域,JavaScript几乎无处不在。它不仅在客户端编程中占据主导地位,而且在服务器端(Node.js)和移动应用开发中也越来越受欢迎。然而,JavaScript的核心并非由单一的公司或组织控制,而是由一个国际标准组织——ECMAInternational通过ECMAScript规范来定义。本文将......
  • 「终极收藏」前端开发必备:超全JavaScript公共方法大全
    目录引言1安装js-tool-big-box工具包1.1安装1.2截至目前的方法集合 2时间日期类 2.1更灵活的年月日时分秒2.2 日期时间转换2.3个性的时间组合 2.4 某个时间距离现在2.5 平年还是闰年2.6指定月份的天数 2.7属相2.8获取指定年份的法定节假日 3......