字符串的方法

  • 在底层,字符串是以字符数组的形式保存的

    例:var str = "hello";

    ​ 底层:["h","e","l","l","o"]

  • 字符串的大部分方法对原字符串都不会产生影响

  • length属性

    • 用来获取字符串的长度

charAt()

  • 可以返回字符串中指定位置的字符

  • 根据索引获取指定的字符

  • str.[]得到的结果相同

    1
    2
    3
    var str = "Hello World";
    console.log(str.charAt(6));
    console.log(str[6]);

    输出结果为:

    image-20210504154539963

charCodeAt()

  • 可以返回字符串中指定位置的字符编码(Unicode编码)

fromCharCode()

  • 可以根据字符编码去获取字符

  • 该方法是通过调用String的构造函数调用

    var result = String.fromCharCode(20);

concat()

  • 可以用来连接两个或多个字符串

  • 作用和+一样

    result = str.concat("你好","再见");

indexOf()

  • 该方法可以检索一个字符串中是否含有指定内容

  • 如果字符串中含有该内容,则会返回其第一次出现的索引

    如果没有找到指定的内容,则返回-1

  • 可以指定第二个参数,指定开始查找的位置

1
2
3
4
5
6
7
8
9
var str = "Hello World";
var result1 = str.indexOf("H");
var result2 = str.indexOf("h");
var result3 = str.indexOf("l");
var result4 = str.indexOf("l",6);
console.log(result1);
console.log(result2);
console.log(result3);
console.log(result4);

输出结果为:

image-20210504161200030

lastIndexOf()

  • 该方法的用法和indexOf()一样

    不同的是indexOf()是从前往后找

    lastIndexOf()是从后往前找

  • 可以指定第二个参数,指定开始查找的位置

slice()

  • 可以从字符串中截取指定的内容

  • 不会影响原字符串,而是将截取到的内容返回

  • 参数:

    • 第一个:开始位置的索引(包括开始位置)

    • 第二个:结束位置的索引(不包括结束位置)

      如果省略第二个参数,则会截取到后边所有内容

    • 也可以传递一个负数作为参数,负数的话将从后面开始计算

1
2
3
4
5
6
7
var str = "Hello World";
var result1 = str.slice(1,4);
var result2 = str.slice(1,-1);
var result3 = str.slice(1);
console.log(result1);
console.log(result2);
console.log(result3);

输出结果为:

image-20210504162457012

substring()

  • 可以从字符串中截取指定的内容,与slice()类似

  • 参数:

    • 第一个:开始位置的索引(包括开始位置)

    • 第二个:结束位置的索引(不包括结束位置)

    • 不同的是这个方法不能接受负值作为参数

      如果传递了一个负值,则默认使用0

    • 而且它还自动调整参数位置,如果第二个参数小于第一个参数,则自动交换

split()

  • 可以将一个字符串拆分为一个数组
  • 参数:
    • 需要一个字符串作为参数,将会根据该字符串去拆分数组
    • 如果传递一个空串作为参数,则会将每一个字符都拆分为数组中的每一个元素
1
2
3
4
5
var str = "abc,def,ghi,jkl";
var result = str.split(",");
var result2 = str.split("g");
console.log(result);
console.log(result2);

输出结果为:

image-20210504164351708

toUpperCase()与toLowerCase()

  • toUpperCase()可以将字符串转换为大写并返回
  • toLowerCase()可以将字符串转换为小写并返回
1
2
3
4
5
var str = "AbCdEfgHijKl";
var result = str.toUpperCase();
var result2 = str.toLowerCase();
console.log(result);
console.log(result2);

输出结果为:

image-20210504164857730

正则表达式

  • 正则表达式用于定义一些字符串的规则
  • 将字符串中符合规则的内容提取出来

创建正则表达式对象

  • 语法:

    var 变量 = new RegExp("正则表达式","匹配模式");

    使用typeof检查正则对象,会返回object

  • 在构造函数中可以传递一个匹配模式作为第二个参数

    可以是

    • i 忽略大小写
    • g 全局匹配模式

一般我们经常使用字面量来创建正则表达式

  • 语法:

    var 变量 = /正则表达式/匹配模式

    1
    2
    //var reg = new RegExp("a","i");
    var reg = /a/i;

正则表达式的方法

  • test()

    使用这个方法可以检查一个字符串是否符合正则表达式的规则

    如果符合则返回true,否则返回false

1
2
3
4
5
//这个正则表达式可以检查一个字符串中是否含有a或A
var reg = new RegExp("a","i");
var str = "a";
var result = reg.test(str);
console.log(result);
  • 使用|表示或者的意思

    1
    var reg = /a|b|c/;
  • []里的内容也是或的关系

    [abcd] == a|b|c|d

    [a-z]任意小写字母

    [A-Z]任意大写字母

    [A-Za-z]任意字母

    [0-9]任意数字

    • 检查一个字符串中是否含有abc或adc或aec

      reg = /a[bde]c/;

  • [^ ]除了

    reg = /[^ab]/;除了a或b还有其它则为true

    reg = /[^0-9]/;除了数字还有其它则为true

字符串与正则相关的方法

split()

  • 方法中可以传递一个正则表达式作为一个参数,这样方法将会根据正则表达式去拆分字符串

  • 这个方法即使不指定全局匹配,也会全都拆分

    1
    2
    3
    4
    //根据任意字母来拆分字符串
    var str = "1a2b3c4d5e6f7";
    var result = str.split(/[a-z]/);
    console.log(result);

    输出结果为:

    image-20210507213832867

  • 可以搜索字符串中是否含有指定内容

  • 如果搜索到指定内容,则会返回第一次出现的索引,如果没有搜索到,则返回-1

  • 他可以接受一个正则表达式作为参数,然后会根据正则表达式去检索字符串

  • search()只会查找第一个,即使设置全局匹配也没用

    1
    2
    3
    4
    5
    6
    7
    8
    //根据任意字母来拆分字符串
    var str = "hello abc hello aec afc";
    var result = str.search("ab");
    console.log(result);

    //搜索字符串中是否含有abc 或aec afc
    var result2 = str.search(/a[bef]c/);
    console.log(result2);

    输出结果为:

    image-20210507215125679

match()

  • 可以根据正则表达式,从一个字符串中将符合条件的一个或多个内容提取出来

  • 默认情况下,match()只会找到第一个符合要求的内容,找到以后就停止检索

    我们可以设置正则表达式为全局匹配模式,这样就可以匹配到所有内容

    可以为一个正则表达式设置多个匹配模式,且顺序无所谓

  • match()会将匹配到的内容封装到一个数组中并返回,几十只查询到一个结果

    1
    2
    3
    4
    var str = "1a2b3c4d5e6f7A8B9C";
    var result = str.match(/[a-z]/ig);
    console.log(result);
    console.log(result[3]);

    输出结果为:

    image-20210507221425573

replace()

  • 可以将字符串中指定的内容替换为新的内容

  • 参数:

    1. 被替换的内容,可以接受一个正则表达式作为参数
    2. 新的内容
  • 默认只会替换第一个

    1
    2
    3
    4
    5
    6
    7
    var str = "1a2b3c4d5e6f7A8B9C";
    var result1 = str.replace(/[a-z]/ig,"@_@");

    //若替换为一个空串,则等于做删除操作
    var result2 = str.replace(/[a-z]/ig,"");
    console.log(result1);
    console.log(result2);

    输出结果为:

    image-20210507222252563

正则表达式语法

量词

  • 通过量词可以设置一个内容出现的次数

  • 量词只对它前边的一个内容生效

    若想要对多个内容生效,需要用()将所指内容括起来

  • {n}正好出现n次

  • {m,n}出现m-n次

  • {m,}m次以上

  • +至少一个,相当于{1,}

  • *0个或多个,相当于{0,}

  • ?0个或一个,相当于{0,1}

  • ^表示开头

    例:/^a/表示以a开头

  • $表示结尾

    例:/a$/表示以a结尾

  • 如果在正则表达式中同时使用^ $,则要求字符串必须完全符合正则表达式

    /^a$/表示字符串中只有一个a,这个a既是开头,也是结尾,同时成立

    /^a|a$/表示以a开头或以a结尾

特殊

  • .表示任意字符

  • 在正则表达式中,使用\作为转义字符

    \.表示.

    \\表示\

    1
    2
    var reg = /\./;
    console.log(reg.test("b.")); //true

    要注意的是:

    ​ 在字符串中如果要使用\,也需要\\,因为字符串中也需要转义,但实际上字符串中只有一个\

  • 注意:

    使用构造函数时,由于它的参数是一个字符串,而\是字符串中的转义字符

    如果要使用\,则需要用\\来代替

    1
    2
    reg = new RegExp("\\.");    //验证是否含有.
    reg = new RegExp("\\\\"); //验证是否含有\
  • \w任意字母,数字,下划线_

    相当于[A-z0-9_]

  • \W除了字母,数字,下划线_

    相当于[^A-z0-9_]

  • \d任意数字

    相当于[0-9]

  • \D除了数字

    相当于[^0-9]

  • \s空格

  • \S除了空格

  • \b单词边界

  • \B除了单词边界

    1
    2
    3
    var reg = /\bchild\b/;
    console.log(reg.test("hello child"));
    console.log(reg.test("hello children"));

    输出结果为:

    image-20210508203055190

  • /^\s*|\s*$/g匹配开头和结尾的空格

邮件的正则

  • 任意字母数字下划线.任意字母数字下划线@任意字母数字.任意字母(2-5位).任意字母(2-5位)
1
2
3
var emailReg = /^\w{3,}(\.\w+)*@[A-Za-z0-9]+(\.[A-Za-z]{2,5}){1,2}$/;
var email = "123abc.hello@163.com";
console.log(emailReg.test(email)); //true