JS 中的 字符串

一、字符串的 特点

• JS 中字符串 不可变 （字符串返回的方法，都是新的字符串）

• 谷歌浏览器控制台中：字符串是灰色的, 数字是蓝色的

• 字符串方法返回值： 新的处理后的字符串

二、字符串的 属性 .length

• 字符串.length 返回字符串的长度（空格也算长度）

二、字符串方法

1. 转换方法

（1）String( ) 转成 字符串 方法【常用于基本数据类型 转字符串】

• 语法： 参数作为 要转换的值；String(要转换的值)

• 转换类别：

  • 数值、布尔值 、null 、 undefined 转换：String(变量)，返回字符串

  • 对象转换：String({})，都返回 ""[object Object]""

  • 数组转换：

    • String([])，返回 ''

    • String([1, 2, 3])，返回 "1, 2, 3"

    • String([{}]) 返回 "[object Object]"；

（2）toString( ) 转成 字符串 方法

• 语法：

  • 无参数：变量.toString( )

  • 一个参数：转换数字时，参数作为当前数字的进制值，将当前数字转为十进制的数字字符串；变量.toString(param)

• 数值、布尔值 转换：变量.toString()，返回字符串

• null 、 undefined 转换：会报错，因为 null 、 undefined 不能转为基本包装类型，没有 .toString() 方法

• 对象转换：对象.String()，返回 "[object Object]"

• 数组转换：

  • [].String()，返回 ''

  • [1, 2, 3].toString()，返回 "1,2,3"

  • [{}].String() 返回 "[object Object]"

（3）toLocaleString( ) 用于将时间 转为本地字符串

• 语法： 时间对象.toLocaleString()

var date = new Date();
console.log(date.toLocaleString());   // 2017/10/24 下午12:09:15

（4）split( ) 字符串转数组：除去字符串分隔符，组成数组并返回 【重要】

• 语法： str.split(分隔符)
  • 字符串去掉分隔符，从分隔符处，开始组成数组

var str = '123-45-67-89';
console.log(str.split('-')); // ["123", "45", "67", "89"]
console.log(str.split('')); //["1","2","3","-","4","5","-","6","7","-","8","9"]
console.log(str.split()); // ["123-45-67-89"]

• 对比： 数组 转 字符串方法 数组.join(分隔符)

（5）toLocaleUpperCase( ) 所有字母 都转成 大写

（6）toLocaleLowerCase( ) 所有字母 都转成 小写

• 语法： str.toLocaleUpperCase() 、 str.toLocaleLowerCase()

var str = 'xbhshkds';
    var strNew1 = str.toLocaleUpperCase();
    var strNew2 = strNew1.toLocaleLowerCase();
    console.log(strNew1); // 'XBHSHKDS'
    console.log(strNew2); // 'xbhshkds'

2. 截取、拼接、替换 方法

（1）slice( ) 截取（开始，结束） 【重要】

• 语法： 字符串.slice(start, end)

  • 参数： ( start)；截取开始索引 start；一直截取到字符串最后

  • 参数： ( start, end )；截取开始索引 start 、截取结束索引 end （不包含end）

  • 参数索引：接受负数

• 类似数组的 数组.slice(start, end) 方法

• 应用： 截取url中重要部分

var url = 'http://item.taobao.com/item.htm?a=1&b=2&c=&d=xxx&e';
var urlStr = url.slice( url.indexOf('?')+1);

（2）substring( ) 截取（开始，结束）

• 语法： 字符串.substring(start, end)

  • 参数： ( start)：截取开始索引 start；一直截取到字符串最后

  • 参数： ( start, end )：截取开始索引 start 、截取结束索引 end （不包含end）

  • 参数索引：接受负数

• 参数索引：不接受负数 （与 slice() 和 substr() 方法不同的点）

var str = '123456789';
var strNew = str.substring(1,4);
console.log(strNew); // '234'

（3）substr( ) 截取 （开始，个数）

• 语法： 字符串.substr(start, number)

  • 参数： ( start )：截取开始的索引 start ；一直截取到字符串最后

  • 参数： ( start, number )：截取开始的索引 start 、 number 截取个数

  • 参数索引：接受负数

var str = '123456789';
var strNew = str.substr(1,4);
1console.log(strNew); // '2345'

（4）concat( ) 拼接 （多个 拼接项）

• 语法： str1.concat(str2, str3, str4 ...)

  • 字符串调用方法，将一个字符串作为参数传入

  • 可接受多个参数，进行拼接

• 等同于字符串拼接 +

• 类似于数组方法数组.concat()

var str1 = new String("This is ");
var str2 = new String("string one");
var str3 = str1.concat(str2);

console.log(str3);  // This is string one

（5）replace( ) 替换 （被替换项，替换项） --- 可去除字符串中所有的空白

• 语法： str.replace(searchValue, replaceValue)

  • 参数 searchValue：要替换的字符串

    • 字符类型： 只匹配上第一个符合条件的项，替换掉

    • 正则类型： 全局正则，会匹配上字符串中所有符合条件的项，统一替换

  • 参数 replaceValue：要替换成的字符串

var str ='<tr><td>{$id}</td><td>{$name}</td></tr>';
var str1 = str.replace('{$id}','10').replace('{$name}','TOM');
console.log(str1);

• 去掉字符串中所有的空白：

var str = ' d gg h';
var result = replace(/\s/g,"")
console.log(result);  // "dggh"

3. 查找 方法

（1）indexOf( ) 正数查找第一个查找符合条件的，返回索引

• 语法： str.indexOf(value) 、 str.indexOf(value, startIndex)

  • 精确查找： 查到返回索引值；查不到返回 -1

  • 参数（value）：默认从索引为0的开始查找

  • 参数 （value, startIndex）：：value是被查找项、startIndex是开始查找的位置（含此位置的数组项）

（2）lastIndexOf( ) 倒数查找第一个查找符合条件的，返回索引

（3）search( ) 正数 查找符合条件的，返回 第一个符合条件的 索引

• 精确查找： 查到返回索引值；查不到返回 -1

• 参数 （value）：返回第一个符合条件的项 的索引

• 参数 （regexp）：全局正则，返回第一个符合条件的项 的索引

var str = 'zhks k h g k n ';

var result1 = str.search(/\s/g);
var result2 = str.search('k');
console.log(result1);  // 4
console.log(result2);  // 2

（4）match( ) 正数 查找符合条件的，返回 符合条件的项构成的数组

• 参数 （value）：返回第一个符合条件的项，构成的数组

• 参数 （regexp）：全局正则，返回所有符合条件的项，构成的数组

参数：正则对象、正则表达式；返回数组（匹配到的项组成）；匹配不到返回 null

var str = "The rain in SPAIN stays mainly in the plain"; 
var n = str.match(/ain/g);   // ["ain", "ain", "ain"]
var m = str.match(/ain/);    // ["main"]

4. 去空白 方法

（1）trim( ) 去掉字符串空白（只能去开头、结尾，中间的空白不能去掉）

• 示例：

var str = '   12  34567 89  ';
var strNew = str.trim(str);
console.log(strNew); // '12  34567 89'

• 去除所有空格，用 replace 方法

var str = ' z d k o';
var result = str.replace(/[ ]/g, '');

console.log(result);
console.log(result.length);