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.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(startIndex,endIndex) => String, 切片,返回从 startIndex 截取 endIndex 前的字符串
  str.slice(); // 'hello world'
  str.slice(2); // "llo world"
  str.slice(0,2); // 'he'
  str.slice(null,2); // 'he'
  str.slice(null,null); // ""
  str.slice(0,null); // ""
  str.slice(0,-1); // "hello worl"
  
  // substr(startIndex,length) => String, 返回从 startIndex 截取 length 位字符串
  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) => String , 截取, 取 start= Math.min(index1,index2,0)为起始值,另外大于start的为终止值 ,返回包含起始位置不包含终止位置的字符串
  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'
  

  slice 与 substring 的区别: substring的参数顺序不严格,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']