JavaScript基本数据类型（2）- 字符串(String)

字符串(String)

所有 单引号'' 双引号"" ES6字符串`` 包裹起来都是字符串

*其他类型转换成字符串

其他类型转换成字符串类型有两种方式

1，toString

---

• 把基本类型转换成字符串

  let s = 20;
  console.log(s.toString());      	// '20'
  console.log(NaN.toString());    	// 'NaN'
  console.log(true.toString());   	// 'true'
  console.log(null.toString());   	// 报错，结果是 'null',但是浏览器不允许调用null的基本包装
  console.log(undefined.toString());	// 报错，结果是 'undefined'，同上
  

• 引用数据类型转换成字符串

  console.log([].toString());			// ''
  console.log([1].toString());		// '1'
  console.log([1, 2].toString());		// '1, 2'
  let o = {}
  console.log(o.toString());     //[object Object]
  let obj = {name: 'xxx', age: 20}
  console.log(obj.toString()); //[object Object]
  

  • 数组转换成字符串去掉两边的 []，把里面的值放到一个空字符串中
  • 对象转换成字符串，返回其数据类型，其原因是因为对象的原型链中该方法是用来检测数据类型的

2，字符串拼接

---

使用 + 进行字符串拼接，分3中情况

1. 表达式里有字符串，运算变成字符串相加，除字符串以外的值都需要进行 .toString() 成字符串

   console.log('10' + 10);         // 10 + String(10) => '10' + '10' = '1010'
   console.log('10' + {});         // 10 + String({}) => '10' + '[object Object]' = '10[object Object]'
   console.log('10' + [10]);       // 10 + String([10]) => '10' + '10' = '1010'
   console.log('10' + [10, 20]);   // 1010,20
   console.log('10' + true);       // 10true
   console.log('10' + null);       // 100
   console.log('10' + undefined);  // undefined
   
   console.log('10' + true);      // 10 + String(true) => '10' + 'true' = '10true'
   console.log('10' + null);      // 10 + String(null) => '10' + 'null' = '10null'
   console.log('10' + undefined); // 10 + String(undefined) => '10undefined'
   

2. 表达式里无字符串，运算变成数值相加，除数值外的值都需要进行 Number() 成数字

   console.log(10 + true);             // 10 + Number(true) => 10 + 1 = 11
   console.log(10 + null);             // 10 + Number(null) => 10 + 0 = 10
   console.log(10 + undefined);        // 10 + Number(undefined) => 10 + NaN = NaN
   

3. 表达式里无字符串，表达式里有 数值 和 引用类型 相加

   console.log(10 + {});   // 10 + Number({}) => 10 + '[object Object]' => '10[object Object]'
   console.log(10 + [10]); // 10 + Number([10]) => 10 + '10' = '1010'
   

面试题

let a = 10 + null + true + [] + undefined + 'xyb' + null + [] + 10 + false

// 考点：数值 + 引用数据类型 = 字符串
/*
1.	10 + Number(null) => 10 + 0 = 10
2.	10 + Number(true) => 10 + 1 = 11
3.	11 + Number([])   => 11 + [].toString() => 11 + '' => '11'
4.	'11' + String(undefined) => '11undefined'
5.	'11undefined' + 'xyb' => '11undefinedxyb'
...
*/

// 最终结果是： 11undefinedxybnull10false


// 自己出题
let b = null - 10 - false + 20 + null + undefined + true + 1
// NaN
let c = 20 * null / false + 16 * true * true + null + 45 - [] + undefined
// 0 / false = NaN

toString和 valueOf

任何数据类型的相互转换都遵循这两个方法，.toString() 和 .valueOf()

任何的基本数据类型之间的转换，都是把其转换成包装类型，在调用 toString 和 valueOf

1. 基本数据类型（包装类型）

   基本数据类型 --> 字符串，也就是 原始值 --> 字符串

   // 1. 把 20 转换成字符串的 '20'
   let a = 20;
   String(a)	// '20'
   
   // 2. 把 true 这个bool值转换成 'true'
   String(true)	// 'true'
   
   // 3. null/undefined  转换成 'null' / 'undefined'
   String(null)	// 'null'
   String(undefined)	// 'undefined'
   

   ①：数字转换成字符串：

   1. 使用 String() 把数字字面量转换成字符串字面量，会直接调用该值的 .toString() 方法，但是 a 没有
   2. 这时JS内部帮我们把 a 包装成 new Number(20) 对象并且调用了该对象的 toString() 方法
   3. 数字对象的 toString()，方法返回一个原始值(也就是基本数据类型20)，JS把他转换成字符串 ‘20’ 返回

   ②：布尔值转换成字符串

   1. 使用 String() ，会直接调用 true 的 .toString() 方法，但是 true 没有这个方法
   2. JS内部帮我们把 true 包装成 new Boolean(true) 对象并且调用了该对象的 toString() 方法
   3. 布尔对象的 toString() 方法返回一个原始值(也就是原始值true)，JS把他转换成字符串 ‘true’ 返回

   ③： null/undefined 转换成字符串

   JS不允许我们访问这两个对象，它这两种数据类型做了保护措施，我们直接使用会报错，但是需要牢记内部的执行操作是差不多的，都是调用了 toString() 方法，并由 JS 来进行对原始值的转换

   基本数据类型 --> 数字，也就是 原始值 --> 数字

   // 1. 把 '20' 转换成数字 20
   let a = '20';
   Number(a)	// '20'
   
   // 2. 把 true 这个bool值转换成 1
   Number(true)	// 'true'
   
   // 3. null/undefined  转换成 'null' / 'undefined'
   Number(null)	// '0'
   Number(undefined)	// 'undefined'
   

   ①：字符串转换成数字：

   1. 使用 Number() 把字符串字面量转换成数字字面量，会先调用该值的 .valueOf() 方法，但a没有这个方法
   2. 这时 JS 内部帮我们把 a 包装成 new String(20) 对象并且先调用了该对象的 valueOf() 方法
   3. 此时 valueOf() 返回原始数据类型字符串 ‘20’ ，JS内部会帮我们转换’20’ 为 20

   ②：布尔值转换成数字：

   1. 使用 Number() ，会先调用 true 的 .valueOf() 方法，但是 true 没有这个方法
   2. JS内部帮我们把 true 包装成 new Boolean(true) 对象并且调用了该对象的 valueOf() 方法
   3. 布尔对象的 valueOf() 方法返回一个原始值(也就是原始值true)，JS把他转换成数字 1 返回

   ③：null/undefined 转换成 0 / NaN

   JS不允许我们访问这两个对象，它这两种数据类型做了保护措施，我们直接使用会报错，但是需要牢记内部的执行操作是差不多的，都是调用了 valueOf() 方法，并由 JS 来进行对原始值的转换

2. 引用类型（对象，函数）

   任何的引用类型转换成基本类型，都是在调用 toString 和 valueOf

   JavaScript 中对象到字符串的转换经历了如下的过程：

   • 如果一个对象有 .toString() 这个方法，调用该方法。如果返回值是一个原始值（基本数据类型），JavaScript就会把这个值转换成 字符串（本身不是字符串前提下），并返回（原始值->字符串看上面）

   • 如果对象没有 .toString() 这个方法，或者没有返回原始值（基本数据类型），JavaScript就会调用 .valueOf() 方法，如果返回是原始值，JavaScript就会把这个值转换成 字符串（本身不是字符串前提下），并返回（原始值->字符串 看上面）

   • 例子

     // [] -> 字符串
     // 直接调用数组的 .toString() 方法	==> [].toString() = ''
     console.log([])		// ''
     console.log([10])	// '10'
     
     // {} -> 字符串
     // 直接调用对象的 .toString() 方法	==> {}}.toString() = ''
     let o = {};
     o.toString();	// "[object Object]"  对象的toString() 返回的时一个表示其类型的字符串
     

   JavaScript 中对象到数字的转换经历了如下的过程：

   • 如果一个对象有 .valueOf() 这个方法，调用该方法。如果返回值是一个原始值（基本数据类型），JavaScript就会把这个值转换成 数字，并返回（原始值->字符串看上面）

   • 如果对象没有 .valueOf() 这个方法，或者没有返回原始值（基本数据类型），JavaScript就会调用 .toString() 方法，如果返回是原始值，JavaScript就会把这个值转换成 数字，并返回（原始值->字符串 看上面）

   • 例子

     // [] -> 数字
     // 1. 先调用数组的 .valueOf() 方法	==> [].valueOf() = Array []    但返回的并不是原始值
     // 2. 所以执行第二步调用数组的 .toString() 方法 ==> [].toString() = ''
     console.log([])		// ''
     console.log([10])	// '10'
     
     // {} -> 字符串
     // 1. 先调用对象的 .valueOf() 方法	==> {}.valueOf() = Object {  }  但返回的并不是原始值
     // 2. 所以执行第二步调用对象的 .toString() 方法 ==> {}.toString() = "[object Object]"
     let o = {};
     o.toString();	// "[object Object]"  对象的toString() 返回的时一个表示其类型的字符串