javascript 数据类型之 - String

基本数据类型特点

• 值不可以更改, 进行操作都是创建一个新的区域存放操作结果, 原值不变.
• 简单类型, 只有值, 没有属性和方法, 相关操作是内部先转成相对应包装对象.

创建方式

• 字面量

字面量表示如何表达这个值，一般除去表达式，给变量赋值时，等号右边都可以认为是字面量。
字面量分为字符串字面量(string literal )、数组字面量(array literal)和
对象字面量(object literal)，另外还有函数字面量(function literal)。

var str1 = 'hello'
var str2 = "hello world" ; // str2 为变量名, "hello world" 为字符串字面量

// ES6, 字符串带变量
var name = 'kitty'
var str3 = `hello ${name}`; // 'hello kitty'

• 包装类构造

var str3 = new String('hello'); // str3 则为对象类型
console.log(str3.valueOf()); // 'hello'

两种创建方式的区别

• typeof

var str1 = 'hello'
typeof str1 ; // 'string'

var str2 = new String('hello')
typeof str2 ; // 'object'

• instanceof

var str1 = 'hello';
str1 instanceof String; // flase

var str2 = new String('hello')
str2 instanceof String; // true

两种创建方式的共性

• 对值进行操作效果基本一致

var str1 = 'hello'
str1 += ' world'
console.log(str1); // 'hello world'

var str2 = new String('hello')
str2 += ' world'
console.log(str2); // 'hello world'

• 都可以调用 String.prototype 上面的方法

var str1 = 'hello'
str1.toUpperCase(); // 'HELLO'
console.log(str1); // 'hello'

var str2 = new String('hello');
str2.toUpperCase(); // 'HELLO'

基本数据类型不可变性, str1 执行 toUpperCase , str1 的值不变.
字面量定义的字符串能够调用方法, 因为在进行相关操作之前, js 内部对字符串字面量进行了包装操作.

var str = 'hello'
str.a = 123

console.log(str.a); // undefined

// str.toUpperCase() 执行大致经过了以下几步
var _strTmp = new String(str)
_strTmp.toUpperCase() 
_strTmp = null

基本方法

查找类

// 1.索引找相应字符,匹配成功提前直接返回结果 => string (找到的字符串 | '')
var str = 'hello';
str.charAt(0); // h
str.charAt(100); // ''

// 字符串是类数组
str[0]; // h
Array.from(str); // ['h','e','l','l','o']

// 2.通过字符查索引位置,匹配成功提前直接返回结果 => number (找到的索引位置 | -1)
// 从左到右查找
str.indexOf('e'); // 1 ; 查找单字符
str.indexOf('el'); // 1; 查找多字符
str.indexOf('z'); // 未找到返回 -1

// 从右到左查找
str.lastIndexof('l'); // 3 

// 正则匹配查找
str.search(/e/i); // 1 
str.search(/z/i); // -1

// 3. 匹配单个或多个字符串, 返回匹配的结果组成的数组 => Array | null
// 不加全局 (g)
str.match(/l/);
// [0:'l',index:2,input:'hello',groups:undefined,length:1]

// 添加全局 (g) 查找
str.match(/l/g)
// ['l','l']

// 4. includes 查找字符串是否存在 => Boolean
str.includes('hel'); // true

操作类

• 字符拼接

var str = 'hello'
str + ' world'; // 'hello world'

// 或
str.concat(' world'); //  'hello world'
str.concat([' world']); //  'hello world'

• 字符裁剪

var str = 'hello world';

// split: => Array,以特定字符分割成数组
str.split('');  // ["h", "e", "l", "l", "o"]
str.split('zz'); // ['hello']

• slice(start,end)，单向裁剪

参数	是否必须	默认值	可选值	描述
start	否	0	正数/负数/0，非数字转为数字	字符串裁剪的起始位置
end	否	操作的字符串的长度	正数/负数/0，非数字转为数字	字符串裁剪的终止位置(不包括)

var str = 'hello world';

str.slice(); // 'hello world' => 相当于 str.slice(0,str.length)
str.slice(2); // "llo world"
str.slice(0,2); // 'he'
str.slice(0,-1); // "hello worl"
str.slice(-2,0); // ''

// 避免使用
str.slice(null,2); // 'he'
str.slice(true,2); // 

start 和 end 都表示在字符串中的位置索引，只有 end 定位是在 start 的右边，才能截取到对应的字符串，否则为空。可以简单理解为单向切割。

• substr(start,length)，定量切割

参数	是否必须	默认值	可选值	描述
start	否	0	正数/负数/0，非数字转为数字	字符串裁剪的起始位置
length	否	操作的字符串的长度	正数/0，非数字转为数字	要裁剪的长度

str.substr(); // 'hello world'
str.substr(2); // "llo world"
str.substr(0,5); // "hello"
str.substr(-1,1); // 'd'
str.substr(-100,2); // 'he' 从右往左数100位,然后取两位,不够100位, 就以第一位为准

• substring(index1,index2)，双向裁剪

参数	是否必须	默认值	可选值	描述
index1	否	0	正数/0，非数字转为数字，负数和0效果一致	字符串裁剪的起始位置
index2	否	操作的字符串的长度	正数/0，非数字转为数字，负数和0效果一致	字符串裁剪的终止位置(不包括)

var str = 'hello world';

str.substring(); // 'hello world'
str.substring(0,str.length); // 'hello world'
str.substring(3); // "lo world"
str.substring(3,str.length); // 'lo world'
str.substring(3,5); // 'lo'
str.substring(5,3); // 'lo'

substring 的两个参数没有先后顺序，定位到两个点，取中间的字符串，不包含较大参数位置上的字符。

• slice，substr，substring 三者总结

slice 和 substr 参数中负值有效果，substring 负数没效果会转为0处理；三个函数都可以不传参数，默认参数分别为 0 和字符串长度。传非数字的参数会转为数字，但不建议使用。除了 slice 的第二个参数为要裁剪的长度位，其他的参数都是表示定位。

• 转大小写

var str = 'hello world'
var strUpper = str.toUpperCase(); // "HELLO WORLD"
strUpper.toLowerCase(); // 'hello world'

• 清除左右两端空格

var str = '   hello world   ';
str.trim(); // 'hello world'

• 类型转换

// 纯数字式字符串转数字 ,成功可转
var str = '123'
var num = parseInt(str) // 123
var num2 = parseFloat(str) // 123
var num3 = '123' * 1 // 123
var num4 = new Number(str).valueOf(); // 123

// 非纯数字字符串, 部分可转, 必须数字开头
var str2 = 'ff123'; 
parseInt(str2) // NaN
parseFloat(str2) // NaN
str2*1 // NaN
new Number(str2).valueOf(); // NaN

var str3 = '123ff123'; 
parseInt(str3) // 123
parseFloat(str3) // 123
str3*1 // NaN
new Number(str2).valueOf(); // NaN

// parseInt 和 parseFloat 区别
var str4 = '1.26fsdf1313'
parseInt(str4) // 1
parseFloat(str4) // 1.26

常用场景

• 判断是否是回文

var isPalindrome = (str)=> str.split('').reverse().join('') === str;

• 字符串特定字符替换

var str = 'are you kitty? hello kitty!'
var waitReplace = 'kitty'
var toReplace = 'world'

// 替换效果为 'are you world? hello world!'

// 1
var replaceSome = (originStr,waitReplace,toReplace) => originStr.split(waitReplace).join(toReplace);

// 2
var replaceSome = (originStr,waitReplace,toReplace) => originStr.replace(new RegExp(waitReplace,'g'),toReplace);

// 3
var replaceSome = (originStr, waitReplace, toReplace) => {
  var replaceStartIndex = originStr.indexOf(waitReplace);
  if (replaceStartIndex === -1) {
    return originStr;
  }
  else {
    originStr = originStr.substring(0, replaceStartIndex) + toReplace + originStr.substring(replaceStartIndex + waitReplace.length);
    return replaceSome(originStr, waitReplace, toReplace);
  }
}

replaceSome(str,waitReplace,toReplace)

• 筛选字符串中的数字

// 返回匹配后数组
var filterNum = (str) => str.match(/\d+/g);

var str = '1 plus 2 equal 3 , 3 plus 3 equal 6';
filterNum(str); // ['1','2','3','3','3','6']