基本介绍

javascript中的toString方法是我们在写前端时经常要用的一个函数,也就是将我们的变量转换成字符串的方法。

javascript中各种类型的toString方法

javascript中定义了7种数据类型,其中包含了6种原始的数据类型:Boolean Null Undefined Number String Symbol(ECMAScript 6 新定义)Object,在这7中数据类型中,除了undefined和null类型之外,都有toString方法。

Boolean 类型的toString()

对于Boolean对象或值,内置的 toString 方法返回字符串 "true" 或 "false",具体返回哪个取决于布尔对象的值。

Number类型的toString()

Number对象的toString方法返回指定 Number 对象的字符串表示形式。其toString方法可以传递一个参数radix,这个参数的值得取值范围为(2到36)表示进行toString时候所选用的进制,默认情况下选用10进制,如果radix的值不在2到36之间的话,则会抛出一个异常。

如果Number对象的toString方法的进制大于10的话,则会用字母代替,这就是为什么最大值为36了,其实就是0到9这十个数字再加上26个英文字母。如果对象为负数则保留负号。

var count = 10;
console.log(count.toString()); // 输出 '10'
console.log((17).toString()); // 输出 '17'
console.log((17.2).toString()); // 输出 '17.2'
var x = 6;
console.log(x.toString(2)); // 输出 '110'
console.log((254).toString(16)); // 输出 'fe'
console.log((35).toString(36)); // 输出 'z'
console.log((-10).toString(2)); // 输出 '-1010'
console.log((-0xff).toString(2)); // 输出 '-11111111'
console.log((-12.111).toString(16)) // 输出 '-c.1c6a7ef9db23'

针对于数字的toString,其实还有一些坑需要爬:

  • 如归对数字直接使用toString方法的话,浏览器会报错这个时候就需要我们用括号将数字个扩起来,再进行toString,这是因为javascript引擎在解释代码时对于“1.toString()”认为“.”是浮点符号,但因小数点后面的字符是非法的,所以报语法错误;而后面的“1..toString()和1.2.toStirng()”写法,javascript引擎认为第一个“.”小数点,的二个为属性访问语法,所以都能正确解释执行;对于“(1).toStirng()”的写法,用“()”排除了“.”被视为小数点的语法解释,所以这种写法能够被解释执行;

  • 纯小数的小数点后面有连续6或6个以上的“0”时,小数将用e表示法进行输出;

    var num = 0.000006;//小数点后面有5个“0”
    console.log(num.toString());//"0.000006"
    var num = 0.0000006;//小数点后面有6个“0”
    console.log(num.toString());//"6e-7"
  • 浮点数整数部分的位数大于21时,输出时采用e表示法

    ar num = 1234567890123456789012;
    console.log(num.toString());//"1.2345678901234568e+21"

String 类型的toString()

String 类型的toString() 方法返回指定对象的字符串形式。

var str = 'nihao'
console.log(str.toString()) // 输出nihao

object 类型的toString()

对于object类型,也就是对象类型。每个对象都有一个toString()方法,当该对象被表示为一个文本值时,或者一个对象以预期的字符串方式引用时自动调用。默认情况下,toString()方法被每个Object对象继承。如果此方法在自定义对象中未被覆盖,toString() 返回 "[object type]",其中type是对象的类型。

可以自定义一个方法来取代默认的 toString() 方法。该 toString() 方法不能传入参数并且必须返回一个字符串。自定义的 toString() 方法可以是任何需要的值,但如果它附带有关对象的信息,它将变的非常有用。

例如

function Dog(name,breed,color,sex) {
this.name=name;
this.breed=breed;
this.color=color;
this.sex=sex;
} var theDog = new Dog("Gabby","Lab","chocolate","female");

如果使用theDog.toString()的话,则会返回出来一个'[object Object]',接下来定义一toString方法来覆盖object自带的toString方法:

Dog.prototype.toString = function dogToString() {
var ret = "Dog " + this.name + " is a " + this.sex + " " + this.color + " " + this.breed;
return ret;
}

然后使用toString则返回 "Dog Gabby is a female chocolate Lab"

对于object的toString方法来说们不仅仅是将一个对象转换成'[object Object]'这个用途,其实很多时候会使用object.toString.call()来检测变量的类型。

var toString = Object.prototype.toString;

toString.call(new Date); // [object Date]
toString.call(new String); // [object String]
toString.call(Math); // [object Math] //Since JavaScript 1.8.5
toString.call(undefined); // [object Undefined]
toString.call(null); // [object Null]

所以很多时候我们能够通过toString这个方法来做一些类型检测的工作。

数组类型的toString

对于数组的toString方法,其实有一个不同的地方,就是在我们调用数组的toString方法的时候。其实是调用数组中的每个元素的toString方法,最后将结果串联起来。

[new Date(), 123, '23'].toString() // Wed May 20 2020 08:50:49 GMT+0800 (中国标准时间),123,23
[{}, 123].toString() // [object Object],123
[1,2, [3, 4]].toString() // 1,2,3,4

从上面的例子中,我们会发现一个如果是多维数组,通过toString转换出来的结果其实和一维数组调用toString转换出来的结果是一样的。这个时候我们就能考虑到数组的toString的另外一个用法就是可以将多维数组一维化(或者说是数组的扁平化),其实这个将数组进行一维化的方是有一个弊端的,就是不区分数字类型的值字符串的值举个例子:

[1, [2,3,4]].toString() // 1,2,3,4
['1', [2, '3', 4]].toString() // 1,2,3,4

javascript中的toString()的更多相关文章

  1. JavaScript Array 对象方法 以及 如何区分javascript中的toString()、toLocaleString()、valueOf()方法

    1.concat() 2.join() 3.pop() 4.push() 5.reverse() 6.shift() 7.unshift() 8.slice() 9.sort() 10.splice( ...

  2. javascript中的toString()方法

    javascript中的toString()方法,主要用于Array.Boolean.Date.Error.Function.Number等对象.下面是这些方法的一些解析和简单应用,做个纪律,以作备忘 ...

  3. javascript中的toString()、toLocaleString()方法

    javascript中的toString()方法,主要用于Array.Boolean.Date.Error.Function.Number等对象.下面是这些方法的一些解析和简单应用,做个纪律,以作备忘 ...

  4. 简单说 JavaScript中的tostring( ) 与 valueOf( )方法

    说明 所有的对象都继承有toString() 和 valueOf() 方法,对象到字符串,对象到数字的转换,会通过调用待转换对象的这两个方法中的一个来完成. 解释 toString( )方法的作用是: ...

  5. 区分javascript中的toString(),toLocaleString(),valueOf()方法

    首先我们随意创建一个对象,这很简单,打开FF浏览器的Firebug切换到控制台或者打开webkit浏览器的审查元素功能. 输入以下内容: var obj1=[1,2,3,4,5] var obj2=[ ...

  6. JavaScript中对象转换为原始值的规则

    JavaScript中对象转换为原始值遵循哪些原则? P52 对象到布尔值对象到布尔值的转换非常简单:所有的对象(包括数字和函数)都转换为true.对于包装对象亦是如此:new Boolean(fal ...

  7. Javascript中的valueOf与toString

    基本上,javascript中所有数据类型都拥有valueOf和toString这两个方法,null除外.它们俩解决javascript值运算与显示的问题,本文将详细介绍,有需要的朋友可以参考下. t ...

  8. JavaScript中typeof、toString、instanceof、constructor与in

    JavaScript 是一种弱类型或者说动态语言.这意味着你不用提前声明变量的类型,在程序运行过程中,类型会被自动确定. 这也意味着你可以使用同一个变量保存不同类型的数据. 最新的 ECMAScrip ...

  9. 【JavaScript中typeof、toString、instanceof、constructor与in】

    JavaScript中typeof.toString.instanceof.constructor与in JavaScript 是一种弱类型或者说动态语言.这意味着你不用提前声明变量的类型,在程序运行 ...

随机推荐

  1. 【React】在React中 JSX 代码如何转成 JS 代码?

    一.介绍 写 React 代码的朋友应该都是直接写 JSX 代码,JSX 让我们可以在 JS 中直接写 HTML 代码,可阅读性较高.本章节主要介绍 JSX 通过 babel 转换后会生成什么样式代码 ...

  2. CSS预处理器之less和sass

    CSS预处理器 1.        基于CSS的另一种语言 2.        通过工具编译成CSS 3.        添加了很多CSS不具备的特性 4.        能提升CSS文件的组织方式 ...

  3. android studio 软件常见问题

    xml文件没有智能提示 在网上看到说是去掉省电模式就可以了 然后我试了一下并不能解决, 最终我是这么解决的

  4. Socket与系统调用深度分析

    学习一下对Socket与系统调用的分析分析 一.介绍 我们都知道高级语言的网络编程最终的实现都是调用了系统的Socket API编程接口,在操作系统提供的socket系统接口之上可以建立不同端口之间的 ...

  5. salt python msgpack.exceptions.

    msgpack.exceptions.UnpackValueError: 'utf-8' codec can't decode byte 0x82 in position 22: invalid st ...

  6. 清晰架构(Clean Architecture)的Go微服务: 程序结构

    我使用Go和gRPC创建了一个微服务,并试图找出最佳的程序结构,它可以用作我未来程序的模板. 我有Java背景,并发现自己在Java和Go之间挣扎,它们之间的编程理念完全不同.我写了一系列关于在项目工 ...

  7. 简单实现vue列表点击某个高亮显示

    比如ul下有4个li元素. 给每个li绑定点击事件@click="select_li(index),然后这个点击时间会将一个全局变量 selectLi 赋值为 index 的值. 然后在每个 ...

  8. .Net配置Ajax跨域访问

    1.在web.config文件中的 system.webServer 节点下 增加如下配置 <httpProtocol> <customHeaders> <add nam ...

  9. JS--- part6课程介绍 & part5复习

    part6 课程介绍 scroll系列:-----重点,每个属性是什么意思 封装scroll系列的相关的属性,固定导航栏案例---事件浏览器的滚动条事件--能够写出来 封装动画函数---缓动动画--- ...

  10. Windows系统下解决PhPStudy MySQL启动失败

    报错 Apache\Nginx服务正常启动了,但是MySQL却一直启动失败. 解决流程 查看端口是否被占用 打开系统自带的资源管理器,查看监听端口3306是不是被占用,下图中3306端口被mysqld ...