javascript-JSON、字符串

JSON 前后台数据传输

1.JSON.parse(后台传输过来的数据)

反序列化（有时候也被称作JSON数据解析，简称为JSON解析），
能够把JSON字符串转换成JS的数据类型。
转换的时候，如果字符串中存在不符合JSON要求的格式，会直接报错。

使用场景:异步请求成功接受请求回传的数据时, 使用JSON来将数据信息转换为实际可用的数据类型

实例：读取localStorage、sessionStorage、原生返回的对象
let authList = JSON.parse(sessionStorage.getItem("menuList") || "[]");

2.JSON.stringify(要往后台传输的数据)

序列化（有时候也被称作JSON数据封装或数据加密）
能够把JS的数据类型转换成JSON字符串。
转换的时候，如果数据中存在不符合JSON要求的格式，会做对应的处理

使用场景:ajax发送请求时，会将数据封装为一个JSON字符串再发送

// 实例: 兼容ie8浏览器时jquery传递对象参数时
$.each(navList, function (i, v) {
  var itemStr = JSON.stringify(v)
  if (v.fdColumnName) {
    navHtml += "<li><span onclick='handleModal(" + itemStr + ")'>" + v.fdColumnName + "</span></li>"
  }
})

3.JSON的使用场景

1. ajax发送请求时，会将数据封装为一个JSON字符串再发送
2. 请求成功接受请求回传的数据时, 使用JSON来将数据信息转换为实际可用的数据类型

一、模拟多行字符串

var str = 'you'
	+'are'
	+'so'
	+'cute!'  //正确的写法
console.log(str);

二、字符串的属性及方法

1.length、[]、charAt()、charCodeAt()、concat()

// 1.length属性, 返回字符串长度
var txt1 = "Hello World!";
console.log(txt1.length);  // 12

// 2.字符索引：[]方法
var name = "Frankenstein";	
console.log(name[0]);	// F

// 3. 获取指定位置字符：
// 3.1 charAt(index)方法  返回的是具体的字符
// 3.2 charCodeAt(number)方法  返回的是字符对应的Unicode编码
var name = “Frankenstein”；
var at = name.charAt(0);  // F
var codeAt = name.charCodeAt(0);  // 70

// 4. 将指定的数字转为对应的字符
var chars = String.fromCharCode(65);
console.log(chars ); // A

// 5. 字符串连接：concat()方法
var speakWord1 = "come on！Please！";
var speakWord2 = “cute girl！";
var finalWord = speakWord1.concat(speakWord2);
console.log(finalWord);

2.substring()、substr()、slice() 截取字符串

// substring(index1, index2) 是从index1位置开始截取，截止到index2位置结束之间的字符串。
// 第一个参数表示子字符串的开始位置，第二个参数表示结束位置。
var string = 'The Three FireGuners';
string.substring(4, 9) // 'Three'
string.substring(9, 4) // 'Three'
// ps：结束位置理论上应该大于开始位置。
// pss：如果出现第一个参数大于第二个参数的情况，substring方法会自动更换两个参数的位置。


// 2. str.substr(num1,num2) 截取字符串
var string = 'The Three fireGuners';
string.substr(4, 9) // 'Three fir'
string.substr(9, 4) // ' fir'
// subStr方法虽然写法和subString很相似,但表达的涵义以及用法却并不一样.substr方法两个参数不能够互换。


// 3. str.slice(num1,num2) 截取字符串
var string = 'The Three fireGuners';
string.slice(4, 9) // 'Three'
string.slice(9, 4) // ''
// slice的两个参数不能互换,如果开始位置小于结束位置，那么返回结果就是一个空字符串。

// 总结：
// substring、substr、slice三个方法第一个参数都表示字符串截取的开始位置。
// 如果省略第二个参数，那么这三个方法都表示获取字符串本身一直到结束。

3.indexOf() 查找一个字符串在另一个字符串的位置

// 语法：str.indexOf(‘subStr’);
// 参数2：可选参数，表示从这个位置开始向后匹配
var string = 'xiaoMingTongXue';
string.indexOf('i') ; // 1
// 字符串的查找是从原字符串的开始处进行查找。如果查找失败则返回-1.

4.lastIndexOf() 从后查找一个字符串在另一个字符串的位置

// 参数2：可选参数，表示从这个位置开始向前匹配
var string = 'xiaoMingTongXue';
string.lastIndexOf('o') ; //5

5.trim() 去掉字符串两端多余的空格

// 语法：str.trim();
var string = '  China WanSui!  ';
string.trim() ;//China WanSui!
// ps:需要强调的是trim方法并不会对原本字符串产生任何影响，而是会生成一个新的字符串

6.toUpperCase() 转换成大写字母

// 语法：str.toUpperCase();
var string = 'i am grute!';
string.toUpperCase() ;//I AM GRUTE!

7.toLowerCase() 转换成小写字母

// 语法：str.toLowerCase();
var string = 'I AM Grute！';
string.toLowerCase() ; // i am grute！

8.match() 匹配到寻找到的第一个字符串

// 语法：str.match(substr); 返回匹配的字符串的数组内容
var string = 'hello world hello！';
string.match('hello') ; // ['hello', index: 0, input: 'hello world hello！']

9.search() 查找子字符串在指定字符串中的位置

// 语法：str.search('subStr');
// 返回结果为下标。如果没有找到匹配字串，则返回-1。
var string = 'hello world hello！';
string.search('hello') ;//0

10.replace(oldStr, newStr) 替换成【目标字符串】

// 会生成一个新的字符串,
// replace只能改变第一个查找到的子字符串，如果想要改变多个，仍然需要依赖于正则表达式。
var str = 'hello world!';
var newStr = str.replace('world','frank') ;  //hello frank!

11.split(separator) 分割字符串成数组

// split方法能够根据指定的符号将字符串进行分割，分割后的每一个子元素整合成一个数组返回。如果无法分割，那么返回的数组只有一个元素，这个元素就是字符串本身。
// 语法：str.split(symbol);
var string = 'good bye everyone.';
string.split(' ') ;//["good", "bye", "everyone"]
// 分割的符号不同，得到的结果也不同

12.

三、转义符\

// 常见转义字符有：
\'		单引号
\"		双引号
\\		反斜杠
\n		换行 英文是New line，表示使光标下移一格  -- <br/>是浏览器换行
\r	    是回车，英文是Carriage return，表示使光标到行首 

\ttab	(制表符)

四、字符串对象

// 语法：var newString = new String(‘Frankenstein’);
var string1 = "frank";	
console.log(typeof string1); // String 
var string2 = new String("frank"); 	
console.log(typeof string2); //typeof返回 Object

// ps:不要创建 String 对象。它会拖慢执行速度，并可能产生其他副作用：
// pss:字符串和字符串对象是两个完全不同类型的数据，虽然效果相似，但是不能混为一谈！
var x = "John"; 
var y = new String("John");
console.log(x === y);	// 结果为 false，因为是字符串，y 是对象          

五、javascript字符集

JavaScript使用Unicode字符集。也就是说，在JavaScript引擎内部，所有字符都用Unicode表示。
JavaScript不仅以Unicode储存字符，还允许直接在程序中使用Unicode编号表示字符，即将字符写成\uxxxx的形式，其中xxxx代表该字符的Unicode编码。
	比如，\u00A9代表版权符号。解析代码的时候，JavaScript会自动识别一个字符是字面形式表示，还是Unicode形式表示。输出给用户的时候，所有字符都会转成字面形式。

  var s = '\u00A9';
  console.log(s);//©
 		
  \n 换行符	（\u000A）
  \' 单引号	（\u0027）
  \" 双引号	（\u0022）
  \ 反斜杠  	（\u005C）

【字符串Base64编码】
Base64本身是一种加密方式，可以将任意字符转成可打印字符。
有时需要以文本格式传递二进制数据，那么也可以使用 Base64 编码。
而我们使用这种编码方法，主要不是为了加密，而是为了不出现特殊字符，简化程序的处理。
        
javascript中字符串提供了两个有关Base64编码的方法：
  btoa()：字符串或二进制值转为Base64编码
  atob()：Base64编码转为原来的编码
  
  encodeURIComponent()：要将非 ASCII 码字符转为 Base64 编码
  decodeURIComponent()：将转码后的内容转为非ASCII内容
        
  var string = 'frank';
  console.log(btoa(string));//ZnJhbms=
  var string = 'ZnJhbms=';
  console.log(atob(string));//frank

ps:这两个方法不适合非ASCII码的字符，会报错。如果要把非ASCII码字符转为Base64编码，必须中间插入一个转码环节，再使用这两个方法。