js操作字符串indexOf、slice、substr、split等方法总结（上传文件，获取文件后缀名）

1、需求：上传文件，判断文件格式是否符合要求

// 上传前判断大小
beforeUpload(file) {
  let name = file.name;
  let num = !name?0: name.lastIndexOf('.'); // 返回在此字符串中最右边出现的指定子字符串的索引
  let fileType = !name? "": name.substr(num, name.length - 1); // 从最右边出现的指定子字符串的索引裁切到最后的索引
  if (
    fileType == ".ppt" ||
    fileType == ".pdf" ||
    fileType == ".docx"
  ) {
  } else {
    this.$message.error("文件格式不正确!");
    return false;
  }
  let fileSize = file.size / 1024 / 1024 < 20;
  if (!fileSize) {
    this.$message.error("文件大小不能超过20MB!");
    return false;
  }
},

2、拓展：

1、charAt() 获取字符串指定位置的字符

"123.xlsx".charAt(3)  // .

2、indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置

"123.xlsx".indexOf('.') // 3

3、indexOf(str, startIndex)：从指定的索引处开始，返回第一次出现的指定子字符串在此字符串中的索引

"123.123.123.xlws".indexOf('.', 4) // 7

4、lastIndexOf(str) ：返回在此字符串中最右边出现的指定子字符串的索引

"123.123.123.xlws".lastIndexOf('.')  // 11

5、lastIndexOf(str, startIndex) ：返回指定子字符串在此字符串中最后一次出现处的索引，从指定的索引开始反向搜索，如果此字符串中没有这样的字符，则返回 -1

"123.123.123.xlws".lastIndexOf('.', 15)  // 11

6、获取一个字符串值在指定字符串第n次出现的位置

// 注意：num值是从0开始计算的
find(str, keyword, num){
  var x = str.indexOf(keyword); // 首次出现的索引
  for(var i = 0; i < num; i++ ){ // 循环在范围内的值
    x = str.indexOf(keyword, x + 1); // 往前查找
  }
  return x; // 返回keyword在第num次出现的索引
},
let num = this.find("weishengshiedsse", 'e', 1);
console.log(num); // 5
let num = this.find("weishengshiedsse", 'e', 0);
console.log(num); // 1
// 如果查找不到，则返回-1
let num = this.find("weishengshiedsse", 'e', 8);
console.log(num); // -1

7、length： 获取字符串长度

"123.123.123.xlws".length // 16

8、toUpperCase：将字符串全部转为大写，并返回原字符串不变

let str = "abcd";
let newStr = str.toUpperCase();
console.log(str, newStr); // abcd ABCD

9、toLowerCase：将字符串全部变小写，并返回原字符串不变

let str = "ABCD";
let newStr = str.toLowerCase();
console.log(str, newStr); // ABCD abcd

10、concat：将一个或多个字符串拼接起来，返回拼接到的新的字符串，原字符串不变

let str = "ABCD";
let str1 = "1234"
let newStr = str.concat(str1);
console.log(str, str1, newStr); // ABCD 1234 ABCD1234

11、slice：返回被操作字符的子字符串，原字符串不变，接受两个参数，字符串的起始位置和结束位置，返回的字符串不包含结束位置的字符，第一个参数要小于第二个参数，否则返回"",若只有一个参数，返回参数位置到字符串结尾的所有字符串，若传递的参数为负数，将传入的负值与字符串的长度相加

let str = "ABCD";
let newStr = str.slice(1);
console.log(str, newStr); // ABCD BCD

let str = "ABCDEFG";
let newStr = str.slice(1, 5);
console.log(str, newStr); // ABCDEFG BCDE

let str = "ABCDEFG";
let newStr = str.slice(5, 1);
console.log(newStr, typeof newStr); //     string

let str = "ABCDEFG";
let newStr = str.slice(-5, -1);
console.log(str, newStr); // ABCDEFG CDEF

12、substring：当传入的参数是正数时，substring与slice的功能基本相同，唯一的区别是当第一个参数大于第二个参数时，方法将第二个参数作为截取的起始位置而将第一个参数作为截取结束的位置，且截取的字符串不包含第一个参数位置对应的值(结束位置)，当传入的参数是负值时，该方法会将所有的负值转化为0

let str = "ABCDEFG";
let newStr = str.substring(5, 1);
console.log(str, newStr); // ABCDEFG BCDE

let str = "ABCDEFG";
let newStr = str.substring(5, -5);  // 相当于 let newStr = str.substring(5, 0);
console.log(str, newStr); // ABCDEFG  ABCDE

let str = "ABCDEFG";
let newStr = str.substring(-5, -5);  // 相当于 let newStr = str.substring(0, 0);
console.log(str, newStr); // ABCDEFG  " "

13、trim：删除元素前置及后缀的所有空格，然后返回结果，原字符串不变

let str = "   AB  CDEFG   ";
let newStr = str.trim();
console.log('你' + newStr + '好'); // 你AB  CDEFG好

14、substr：返回指定位置开始的指定长度的字符串，原字符串不变，第二个参数为截取多少个字符，若第二个参数缺省就一直截取到字符串结束，当传递的参数为负值时，方法会将负的第一个参数与字符串的长度相加，将负的第二个参数转化为0

let str = "AB CDEFG";
let newStr = str.substr(3, 4);
console.log('你' + newStr + '好'); // 你CDEF好

let str = "AB CDEFG";
let newStr = str.substr(-3, 4); // 相当于 let newStr = str.substr(5, 4);
console.log('你' + newStr + '好'); // 你EFG好

let str = "AB CDEFG";
let newStr = str.substr(-3, -4); // 相当于 let newStr = str.substr(5, 0);
console.log('你' + newStr + '好'); // 你好

15、split：基于指定的分隔符将一个字符串分割成多个字符串(如果是""则每一项通过逗号分割)，并将结果存放在一个数组中，可以传两个参数，第一个参数为分隔符，第二个参数用于指定返回数组的长度，若省略该参数，则返回整个数组详见：https://www.w3school.com.cn/jsref/jsref_split.asp

let str = "ABCDEFG";
let newStr = str.split('');
console.log(newStr); // ['A', 'B', 'C', 'D', 'E', 'F', 'G']
['A', 'B', 'C', 'D', 'E', 'F', 'G'].join('')  // 'ABCDEFG'

let str = "ABCDEFG";
let newStr = str.split('', 3);
console.log(newStr); // ['A', 'B', 'C']

16、字符串索引：通过下标获取字符串指定位置的字符，但是不能改变该索引对应的值（与对象区分开）

let str = "ABCDEFG";
let newStr = str[1];
console.log(str, newStr); // ABCDEFG B

let str = "ABCDEFG";
str[1] = "H";
console.log(str); // 报错，如下图

心中有星星，生活才会有星星！