Go to comments

Collection Js方法

一、字符串方法

https://www.bilibili.com/video/BV1Az4y1U7f5?p=127&vd_source=30698713e5e2b66f66e6fa017646273c

https://www.bilibili.com/video/BV1WA411R7Ev?p=9&vd_source=30698713e5e2b66f66e6fa017646273c

36个js网页特效教程#能全写完就精通JavaScript了#学习猿地#高洛峰_哔哩哔哩_bilibili


字符串字面量,

字面量的英文是 literals,意思是所见既所得,看到的就是我们得到的

var str = "abcd字符串";


字符串对象

var str = new String("abcd");

console.dir(str); // 打印对象上的属性和方法

console.dir(str.__proto__); // 对象原型上的属性和方法


因为有包装类,通过字符串字面量调用方法,js内部调用的是字符串对象下面的方法


1、查找方法

通过下标取值,在 IE8 以下不兼容

var str = 'abcd字符串';

console.log(str[1]); // b


 charAt(index) 

按照索引查找

1. index是索引值(下标)

2. 如果不填 index 索引默认为0

3. 超出 str.length 或小于0,返回一个空字符串

var str = 'abcd字符串';

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

console.log(str.charAt(str.length - 1)); // 串

console.log(str.charAt(str.length)); // 空字符串
console.log(str.charAt(str.length + 10)); // 空字符串
console.log(str.charAt(-5)); // 空字符串


如果比较字符串大小,比较的是字符串Unicode编码的大小,并且是诸位比较,下面比较的是 r 和 v

var str1 = 'ruyic.com'; // r => 114
var str2 = 'v'; // v => 118

console.log(str1 > str2); // false


 charCodeAt( index ) 

charCodeAt 方法参数是字符串的 index 索引值,

获取的数字应该字符的是 Unicode 十六位编码,转换成十进制的数字

var str1 = "中";
var str2 = "文";

console.log(str1.charCodeAt(0) + ' ' + str2.charCodeAt(0)); // 20013 25991

console.log(str1 > str2); // false


str.charCodeAt(index) 获取当前字符串的 Unicode 编码

1. 下标index默认是0

2. 超出下标范围返回NaN,负数下标不存在也会返回NaN

var str = "中文";

console.log(str.charCodeAt()); // 20013
console.log(str.charCodeAt(10)); // NaN
console.log(str.charCodeAt(-10)); // NaN


 String.fromCharCode() 

fromCharCode() 方法不是字符的,是字符串构造函数  String  上的静态方法,作用是把 Unicode 编码转成字符串


先把三个中文的 Unicode 编码存入一个数组

var str = "大中国";
var arr = [];

for(var i = 0; i < str.length; i++){
  arr[i] = str.charCodeAt(i);
}

console.log(arr); // [22823, 20013, 22269]


再转换对应的 Unicode 码

var arr = [22823, 20013, 22269];

console.log(String.fromCharCode(arr[0])); // 大
console.log(String.fromCharCode(arr[1])); // 中
console.log(String.fromCharCode(arr[2])); // 国


以逗号间隔,可以填多个Unicode编码

var arr = [22823, 20013, 22269];

console.log(String.fromCharCode(arr[0], arr[1], arr[2])); // 大中国


 indexOf() 

查找字符串中是否有对应的字符串

如果有返回字符第一次出现的索引值(下标)

如果没有查找的字符串返回 -1


第一个参数searchValue,是想要查找的值,不区分大小写

var str = "abcdabcd字符串";

console.log(str.indexOf("c")); // 2

console.log(str.indexOf("d字")); // 因为从下标[7]开始出现的d,所以返回 7

console.log(str.indexOf("k")); // 查找的值不存在返回 -1


第二个参数fromIndex,是搜索的启始位置,该参数是可选的,不填默认为0

console.log(str.indexOf("c", 3)); // 从d开始搜第二个的c,返回的是在整个字符串中的下标 6


第二个参数为负数,返回的是正常从0位开始找,负数默认还是0

console.log(str.indexOf("d", -1)); // 3


手写indexOf

实现基本的功能,第三个参数不能默认,必须填一个0

var str = "abcdabcd字符串";

function myIndex(str, searchValue, fromInedex){
  for (var i = 0; i < str.length; i++) {
    if(str.charAt(i) === searchValue){
      return i;
    }
  }
  
  return -1;
}

console.log(myIndex(str, 'd', 0)); // 3
console.log(myIndex(str, 'v', 0)); // -1


还是有 bug 不能找两个字符比如 "d字",先不管它了

var str = "abcdabcd字符串";

function myIndex(str, searchValue, fromIndex){

  if(fromIndex < 0 || fromIndex === undefined){
    fromIndex = 0;
  }

  if(fromIndex >= str.length){
    return -1;
  }

  console.log('fromIndex ',fromIndex)
  
  for (var i = fromIndex; i < str.length; i++) {
    if(str.charAt(i) === searchValue){
      return i;
    }
  }
  return -1;
}

console.log(myIndex(str, 'd')); // 返回3,不填fromIndex默认为0
console.log(myIndex(str, 'd', -1));  // 返回3,负数fromIndex小于0默认0
console.log(myIndex(str, 'd', 50)); // 返回-1,超过字符串长度返回-1
console.log(myIndex(str, 'd', 2)); // 返回3,找到的d在字符串下标3的位置


 lastIndexOf 

indexOf 是从前往后查找,loastIndexOf 是从后往前查找,从后面找到指定字符的索引

var str = "abcdabcd字符串";

console.log(str.lastIndexOf("d")); // 7
console.log(str.indexOf("d")); // 3


第二个参数 fromIndex

不填默认为 length,

超过默认 length 则为 length,跟 indexOf 第二个参数小于0则就等于0是一样的

console.log(str.lastIndexOf("d")); // 7
console.log(str.lastIndexOf("d", str.length)); // 7

console.log(str.lastIndexOf("d", 50)); // 7


如第二个参数果小于0则默认为0,从0的位开始往前查找位置

console.log(str.lastIndexOf("a", -50)); // 返回0,第0位就是a所以返回0


如果找不指定的值,跟indexOf一样返回-1

console.log(str.lastIndexOf("v", -50)); // -1


2、截取类方法

 slice(begin, end) 

begin 开始截取的位置,默认为0,如果是负数(如果负数负数超过length,则默认从0开始)

end 结束截取的位置,不包含在截取的部分

返回一个截取的字符串,从begin位置开始截取,到end的位置结束,但是不包含end的字符串


默认为当前 str.length


第一个参数,

从设置 begin 的位置开始截取,如果不传默认为0

var str = "1234567一个和尚有水吃";

console.log(str.slice()); // 123457一个和尚有水吃
console.log(str.slice(1)); // 23457一个和尚有水吃
console.log(str.slice(7)); // 一个和尚有水吃
console.log(str.slice(9)); // 和尚有水吃


如果 begin 是负数,则倒着截取

console.log(str.slice(-1)); // 吃
console.log(str.slice(-2)); // 水吃


如果 begin 是负数,达到 -length,起始值会设置为0

console.log(str.slice(-20)); // 1234567一个和尚有水吃


第二个参数end

表示截取的结束位置,如果不传默认为当前 length

begin 包含在截取的部分

end 不包含在截取的部分

console.log(str.slice(1, 5)); // 2345


如果 end 超过 length,则默认为 length

console.log(str.slice(1, 50)); // 234567一个和尚有水吃


end 是负值倒着截取

console.log(str.slice(1, -1)); // 234567一个和尚有水


虽然 end 可以是负值,如果超过 -length 则会为0,返回空字符串

console.log(str.slice(1, -50)); // ""


 end 对应的索引值在前面,begin 对应的索引在后面,就像上面 -50 变成了 0,返回一个空字符串

console.log(str.slice(5, 0)); // ""


如果 begin 超出了 length,则返回空字符串

console.log(str.slice(50, 100)); // ""


如果 begin 和 end 是处在同一个索引上,也返回空字符串

console.log(str.slice(5, 5)); // ""
console.log(str.slice(0, 0)); // ""


 substr(start[, length]) 

start 截取的起始位置,可以是负数,如果是负数则从右向左

length 截取字符的个数,如果不填,则默认到字符串结尾的位置,其实就是在当前起始的位置加上个数,然后结束

返回也是新的字符串,并不会改变原字符串,该方法不建议使用,未来可能会被移除


第一个参数,

从起始位置截取,如果不指定第二个参数,默认截取到当前字符串结尾,这个跟 slice 是一样的

var str = "1234567一个和尚有水吃";

console.log(str.substr(2)); // 34567一个和尚有水吃
console.log(str.slice(2)); // 34567一个和尚有水吃


第二个参数,

设置的是截取字符的个数(这是与 slice 不一样的地方,它是截止位置,且不包含该位置)

console.log(str.substr(2, 1)); // 3
console.log(str.substr(2, 2)); // 34


起始位 start 可以是负数,

如果是负数倒着进行查找,从第 -5 的位置“和”字截取2个字符“和尚”

console.log(str.substr(-5, 2)); // 和尚


-5 的下标 [9]

公式: length + start 

// str.length = 14
// 14 - -5 = 9

console.log(str.substr(9, 2)); // 和尚


第二个参数 length 不能太大,如果超出字符串 length 长度,则默认到字符串结尾的位置

console.log(str.substr(7, 20)); // 一个和尚有水吃


如果个数 length 是负值,则返回空字符串

console.log(str.substr(7, -5)); // ""


如果起始位置 start 是负数,则默从 0 开始截取

console.log(str.substr(-50, 2)); // 12


如果起始位置 start 的值太大,返回空字符串

console.log(str.substr(50, 2)); // ""


 substring(begin[, end]) 

begin 截取的起始位置,默认值为0,如果小于0,则为0

end 截取结束的位置,不包含在截取范围内,默认为length,如果超过length,则等于length

返回截取的字符串


第一个参数

begin 截取的起始位置,截取掉第1个字符

var str = "1234567一个和尚有水吃";

console.log(str.substring(1)); // 234567一个和尚有水吃


如果begin的值小于0,则就会被设置为0(这一点跟 slice 倒着截取不一样,如果说 begin 的值小于0,则为0,换句话只要小于0就为0)

console.log(str.substring(-5)); // 1234567一个和尚有水吃
console.log(str.substring(-1)); // 1234567一个和尚有水吃


如果起始位置超过 length,则返回空字符串

console.log(str.substring(50)); // ""


第二个参数

截取的时候包含 begin 的值,不包含 end 的值(效果跟 slice(1, 4) 一样)

console.log(str.substring(1, 4)); // 234

console.log(str.slice(1, 4)); // 234


如果 end 的值超过 length,则默认为 length

console.log(str.substring(1, 50)); // 234567一个和尚有水吃


end 不能设置负数值,不管设置什么样的赋值,依旧是前面的字符 123

console.log(str.substring(3, -5)); // 123
console.log(str.substring(3, -3)); // 123
console.log(str.substring(3, -1)); // 123


事情是这样的,如果小于0,则设置为0


end 是负数为0,

1. begin 的索引值是 3,end 的索引值是 0

2. end 的索引位置,比 begin 更靠前,如果是slice方法会返回空字符串

3. substring方法的规则是调换 begin 和 end


如果起始的 begin 的索引在后,end的索引在前,那么就会把 begin 和 end 调换

console.log(str.substring(5, 1)); // 2345


验证一下调换,调换这一点和slice方法的差别特别大

console.log(str.substring(1, 5)); // 2345


起始位置和结束是同一个索引值,返回的是空字符串,和slice是一样的

console.log(str.substring(3, 3)); // ""


额外

slice(begin, end) 方法可以倒着查找

有一个简单的公式

公式:length - end/begin = 得到当前索引值的位置


3、其他常用方法

 split(separator[, num]) 

将字符串分割成字符串数组

separator 决定分割的字符,该字符的位置作为分割点,并且不在当前数组内,如果是""空字符串,可以把每个一个字符分隔开来

num 可选,决定分割的数组中的个数


把当前字符串变成数组

var str = "一个和尚有水喝";

var arr = str.split();

console.log(arr); // ['一个和尚有水喝']


第一个参数 separator

var str = "一个-和尚-有-水喝";

var arr = str.split("-");

console.log(arr); // ['一个', '和尚', '有', '水喝']


用“有”字进行分割,分割后“有”字就没有了

var str = "一个和尚有水喝";

var arr = str.split("有");

console.log(arr); // ['一个和尚', '水喝']


参数 separator 传一个空字符串,会把每个字间进行了分割

var str = "一个和尚有水喝";

var arr = str.split("");

console.log(arr); // ['一', '个', '和', '尚', '有', '水', '喝']


第二个参数 num,

想分隔出数组中内容个数

var str = "一个和尚有水喝";

var arr = str.split("", 3);

console.log(arr); // ['一', '个', '和']


num最多就到字符串结束,如果超过了length,也只会以字符串最大分割为准

var str = "一个和尚有水喝";

var arr = str.split("", 300);

console.log(arr); //  ['一', '个', '和', '尚', '有', '水', '喝']


有一个问题

如果想要分割的字符 "_",处在字符串的首尾部,就会出现一个空字符串

var str = "_一个和尚_有水喝";

var arr = str.split("_");

console.log(arr); // ['', '一个和尚', '有水喝']


利用这个特点检测字符出现的次数,比如字符 "-" 出现几次

var str = "-ke-ke-ke"

var arr = str.split("-");

console.log(arr.length - 1); // 3


k出现几次

var str = "kkk-vv-nhikask";

var arr = str.split("k");

console.log(arr.length - 1); // 5


 concat() 

将一个或多个字符串与原字符串合并,并返回新字符串,参数可以传多个字符串

var str1 = "一个";
var str2 = "和尚";
var str3 = "有水喝";

var newStr = str1.concat(str2, str3);

console.log(newStr); // 一个和尚有水喝


 性能不如循环里面 +=


 toLowerCase()  字符串转成小写

 toUpperCase()  字符串转成大写

这两个方法返回的都是新字符串


大写字母A是否等于小写字母a

var str1 = "A";
var str2 = "a";

console.log(str1 === str2); // false

console.log(str1.toLowerCase() === str2); // true
console.log(str1 === str2.toUpperCase()); // true


 trim() 

去除首尾的空格,不能去除中间的空格

var str = "   一个和尚有水喝   ";

console.log(str.length); // 13

console.log(str.trim().length); // 7


要去除中间的空格

1. 可以先用split()分割成数组

2. 然后在用 += 加等进行拼接

var str = " fo un d   er";
var newStr = '';

var arr = str.split(""); // [' ', 'f', 'o', ' ', 'u', 'n', ' ', 'd', ' ', ' ', ' ', 'e', 'r', ' ']

for(var i = 0; i < arr.length; i++){
  if(arr[i] != 0){
    newStr += arr[i];
  }
}

console.log(newStr); // founder
console.log(newStr.length); // 7




Leave a comment 0 Comments.

Leave a Reply

换一张