基本介绍

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. 基于Pact的契约测试

    背景 如今,契约测试已经逐渐成为测试圈中一个炙手可热的话题,特别是在微服务大行其道的行业背景下,越来越多的团队开始关注服务之间的契约及其契约测试. 什么是契约测试     关于什么是契约测试这个问题, ...

  2. 大数据学习笔记——Java篇之IO

    IO学习笔记整理 1. File类 1.1 File对象的三种创建方式: File对象是一个抽象的概念,只有被创建出来之后,文件或文件夹才会真正存在 注意:File对象想要创建成功,它的目录必须存在! ...

  3. Butterknife Attribute value must be constant

    背景 在下面的R.id.rv_msg_remind 标红,然后鼠标附上去,显示attribute value must be contant.如下: @BindView(R.id.rv_msg_rem ...

  4. 一篇文章带你解读Redis分布式锁的发展史和正确实现方式

    前言 近两年来微服务变得越来越热门,越来越多的应用部署在分布式环境中,在分布式环境中,数据一致性是一直以来需要关注并且去解决的问题,分布式锁也就成为了一种广泛使用的技术,常用的分布式实现方式为Redi ...

  5. 你不知道的JavaScript(上)作用域与闭包

    第一部分 作用域与闭包 第一章 作用域是什么 1.作用域 变量赋值操作会执行两个动作:首先编译器会在当前作用域中声明一个变量(如果之前没有声明过), 然后会在运行时引擎会在作用域中查找该变量,找到就会 ...

  6. Spring Cloud进阶之路 | 二:服务提供者(discovery)

    1 创建父项目 以前文所述,以spring boot 2.1.7.RELEASE为基,spring cloud版本为Greenwich.SR2,spring cloud alibaba版本为2.1.0 ...

  7. Vsftpd运行的两种模式-xinetd运行模式和 standalone模式

    vsftpd运行的两种模式-xinetd运行模式和 standalone模式 vsftpd提供了standalone和inetd(inetd或xinetd)两种运行模式. standalone一次性启 ...

  8. Python爬虫实战:批量下载网站图片

    前言 本文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理. 作者: GitPython PS:如有需要Python学习资料的小伙伴可以 ...

  9. 设计模式-单例模式code

    package singeton; import java.security.SecureRandom; /** * @author Zero * @since 2019-08-13. * Descr ...

  10. Dynamics 365 Portal 多语言

    Dynamics 365 Portal 的多语言分两种情况: 1.通过定义两套记录来实现,如Web Link Set.Snippet Content,都是定义两套记录,分别关联不同的语言来实现 Web ...