JavaScript 中 toString 的奇妙使用

javascript,tostring · 浏览次数 : 8

小编点评

**toString() 方法的不同用法** 1. **函数类型**: 当我们调用 `toString()` 方法时，函数类型会返回其自身的类型名称。例如，`user()` 的 `toString()` 返回 `function user() {...}`。 2. **布尔类型**: `true` 和 `false` 都会被转换为 `"true"` 和 `"false"`。 3. **数字类型**: 当我们调用 `toString()` 方法时，数字类型会转换为字符串。例如，`10` 将转换为 `"10"`。 4. **数组类型**: 数组类型会被转换为字符串后以英文逗号拼接在一起。例如，`[123, 456]` 将转换为 `123,456`。 5. **日期类型**: `Date` 对象的 `toString()` 方法会返回一个美式英语日期格式的字符串。 6. **孪生方法 `toLocaleString()`**: `toLocaleString()` 方法可以根据语言环境返回不同的字符串格式。例如，`Number.toLocaleString()` 可以根据语言环境返回带千分位的数字字符串。 7. **数字类型**: 当我们不传参时，`toString()` 方法会默认返回以美式英语环境的字符串。例如，`12345` 将转换为 `'12,345'`。 8. **`null` 和 `undefined`**: `toString()` 方法会将 `null` 和 `undefined` 返回 `""`。

正文

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'

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

这里把数组中的所有项均列了出来，没有更深层的数组；
英文逗号,拼接展开的所有项；
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()不单单是将变量转为字符串那么简单，不同类型的数据使用时，会有不同的效果。

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

前端小