美文网首页JavaScript
JavaScript基础学习-字符串方法

JavaScript基础学习-字符串方法

作者: 不是王小贱 | 来源:发表于2017-03-25 12:30 被阅读25次

    String作为一个类,继承了Object中的valueOf()、toLocaleString()和toString()方法,都返回对象所表示的基本字符串值。

    String类型的每一个实例都有一个length属性,表示字符串中包含多少个字符。

    注意:字符串属性不可编辑,任何试图改变它属性的行为都会报错。

    创建方法

    字面量创建方式(最常用)

        var str = 'hello world';
    

    实例创建方式

         var str = new String('hello world')
    

    字符串中方法

    构造器方法

    fromCharCode

    返回使用指定的Unicode序列创建的字符串,也就是说传入Unicode序列,返回基于此创建的字符串

    语法:fromCharCode(num1, num2,…),传入的参数均为数字。

      String.fromCharCode(65, 66, 67); // "ABC"
    

    只能处理字符都是2个字节的,不能处理4字节字符

    fromCodePoint(ES6)

    同fromCharCode,扩展了对4字节字符的支持。

    String.raw(ES6)

    用来充当模板字符串的处理函数,返回一个斜杠都被转义的字符串,对应于替换变量后的模板字符串

    字符串的属性

    • String.prototype.constructor 指向构造器(String())
    • String.prototype.length 表示字符串长度

    1.字符方法

    两个用于访问字符串中特点字符的方法是:charAt()和charCodeAt()。都接受一个参数,一个数字。即基于0的字符位置。

    • chartAt()方法以单字符字符串的形式返回给定位置的那个字符
         var str = 'hello world';
         console.log(str.chartAt(0));//'h'
    
    • chartCodeAt()方法返回的是给定位置的那个字符的字符编码(ASCII)
         var str = 'hello world';
         console.log(str.chartCodeAt(1));//'101'
    
    • 还可以利用方括号加数字索引来访问字符串中的特定字符
    var str = 'hello world';
         console.log(str[0]);//'h'
    

    2.字符串操作方法

    • 1.concat()字符串拼接,参数可以为多个,按照参数顺序进行排序。不改变原字符串。
        var str = 'hello';
         var res = str.concat(' world','hello');
        console.log(res);//hello worldhello
    

    该方法一般情况下不使用,大部分我们都是使用+号来进行字符串拼接的。

    • 2.slice()和substring()是用来截取字符串的。参数可以是1个或者2个。
        slice(n,m)/substring(n,m);//表示从索引n截取到m,但不包含m。原字符串不变,返回一个新的字符串
    

    他俩的区别就是当传入的参数为负值时,会不一样。slice()会将传入的负值与字符串的长度相加。而substring()方法会把所有的负值参数都转换为0

    • 3.substr()也是用来截取字符串的。但参数和上面不同,两个参数。第一个是索引开始的位置,第二个是要截取字符的个数。当参数为负数的情况,会将负的第一个参数加上字符串的长度,而将负的第二个参数转换为0。

    3.字符串位置方法

    indexOf()和lastIndexOf()。这两个方法都是从一个字符串中搜索给定的子字符串,然后返回子字符串的位置(如果没有找到该子字符串,则返回-1)。可以接受第二个参数,表示从字符串中的哪个位置开始搜索。

    区别是:indexOf()方法从字符串的开头向后搜索子字符串,而lastIndexOf()方法是从字符串的末尾向前搜索。

    4.trim()方法

    该方法返回一个去除首尾空格的新字符串。不兼容

    5.字符串大小写转换方法

    toLowerCase()、toLocaleLowerCase、toUpperCase()和toLocaleUpperCase()。区别就是带locale的是针对特点地区的实现。使用带locale的会更稳妥一些。

    6.字符串的模式匹配方法

    • match();
    • 用于测试字符串是否支持指定正则表达式的规则,即使传入的是非正则表达式对象,他也会隐式调用new RegExp(obj)将其转换为正则表达式
      • 参数:1个 要么是一个正则表达式,要么是一个正则对象。
      • 作用:将所有符合条件的捕获到,返回一个数组
      • 返回值:返回一个符合条件的数组
         var str = 'hello world';
    var res = str.match(/he/);
    console.log(res);//[ 'he', index: 0, input: 'hello world' ]
    
    //捕获小分组的内容 在非全局的情况下
      var str = 'hello world';
    var res = str.match(/(o)/);
    console.log(res);//[ 'o', 'o', index: 4, input: 'hello world' ]
    //在全局情况下
      var str = 'hello world';
    var res = str.match(/(o)/g);
    console.log(res);//[ 'o', 'o' ]
    

    该数组的第一项是符合条件的字符串,第二项是出现在字符串中的位置,最后一项是原始字符串。当在非全局的情况下,可以捕获到小分组中的内容,从第一项往后就是小分组捕获的内容。后两项依然是位置和原始字符串。

    在正则是在全局捕获的情况下,match方法的返回值会发生改变,会返回一个符合条件的所有字符串的数组。但无法捕获小分组的内容了就。

    • search();

    • 不支持全局匹配

      • 作用:查找的作用,返回字符串中第一个匹配项的索引。没有的话返回-1。
      • 参数:唯一的参数,要么是一个正则表达式,要么是一个正则对象。
      • 返回值:找到就返回字符串中第一个匹配项的索引,找不到返回-1。
    • replace();

      • 作用:替换子字符串。把符合匹配的内容换成替换的字符串。
      • 参数:两个。第一个参数可以是一个正则或者是一个字符串(不会被转换成正则表达式)。第二个参数可以是一个字符串或者一个函数。
      • 返回值:返回一个替换好的字符串。

    如果第一个参数是字符串,那么只会替换到第一个符合的子字符串。

    //当第一个参数为字符串的时候。第二个参数是字符串
    var str = 'hello world hello world';
    var res = str.replace('hello','HELLO');
    console.log(res);
    
    //当第一个参数为字符串的时候,第二个参数是函数。结果也是只能替换第一个符合的
    var str = 'hello world hello world';
    var res = str.replace('hello',function () {
        console.log(arguments);//{ '0': 'hello', '1': 0, '2': 'hello world hello world' }
        return 'HELLO';
    
    });
    console.log(res);//HELLO world hello world
    

    如果第一个参数是正则,在非全局情况下也是只替换第一个符合的。在全局情况下会替换掉所有符合条件的字符。

    //在非全局的情况下。
      var str = 'hello world hello world';
    var res = str.replace(/hello/,function () {
        console.log(arguments);//{ '0': 'hello', '1': 0, '2': 'hello world hello world' }
        return 'HELLO';
    
    });
    console.log(res);  //HELLO world hello world
    //在全局情况下
    var str = 'hello world hello world';
    var res = str.replace(/hello/g,function () {
        console.log(arguments);//{ '0': 'hello', '1': 0, '2': 'hello world hello world' }   { '0': 'hello', '1': 12, '2': 'hello world hello world' }
        return 'HELLO';
    
    });
    console.log(res);//HELLO world HELLO world
    
    • 在全局模式下。回掉函数的执行次数,取决与原始字符串中有多少符合捕获正则的内容。arguments拿到的是一个数组。在没有小分组捕获的时候,为三项:1.符合大正则的内容,2.找到对应内容的索引,第三.原始子字符串。在有小分组的时候。小分组的内容从第二项开始。
    • return:相当于当前这一次大正则捕获的内容替换成返回的内容。

    • split();

      • 作用:将字符串根据传进来的分隔符,转换成数组
      • 参数:可以是字符串也可以是正则。可以传递第二个参数,是一个数字,表示数组的长度。
      • 返回值:一个基于分隔符的字符串的数组。
      var str = 'hello world hello world hello world';
    var res = str.split(' ');
    console.log(res);//[ 'hello', 'world', 'hello', 'world', 'hello', 'world' ]
    //如果原始字符串中没有传进去的分隔符,则将整个字符串放到一个数组中。
    var str = 'hello world hello world hello world';
    var res = str.split('f');
    console.log(res);   //[ 'hello world hello world hello world' ]
    

    7.localeCompare()

    • 作用:用于比较两个字符串,
    • 参数:str.localeCompare(str1);
    • 返回值:
      • 如果字符串在字母表中应该排在字符串参数之前,则返回一个负数(-1)
      • 如果字符串等于字符串参数,则返回0;
      • 如果字符串在字母表中应该排的字符串参数之后,则返回一个正数

    8.fromCharCode()方法

    是String构造函数上的一个静态方法。作用是接受一或多个字符编码,然后将它们转换成一个字符串。这个方法与charCodeAt()执行的是相反的操作。

    转换字符的大小写

    • toLocaleLowerCase 转换成小写
    • toLocaleUpperCase 转换成大写
    • toLowerCase 转换成小写
    • toUpperCase 转换成大写

    trim()

    清除字符串首尾的空白并返回

    codePointAt(ES6)

    返回使用UTF-16编码的给定位置的值得非负整数

    includes(ES6)

    用来判断一个字符串是否属于另一个字符串,如果是返回true ,反之返回false

    语法:str.includes(subString [, position])

    subString 表示要搜索的字符串,position 表示从当前字符串的哪个位置开始搜索字符串,默认值为0。

    endsWith

    它基本与 contains() 功能相同,不同的是,它用来判断一个字符串是否是原字符串的结尾。若是则返回true,否则返回false。

    normalize(ES6)

    它会按照指定的 Unicode 正规形式将原字符串正规化。

    repeat(ES6)

    返回重复原字符多次的新字符串

    startsWith(ES6)

    类似于endsWith。当前字符串是否是以给定字符串开始的

    与html相关的方法

    anchor

    创建一个锚标签

    语法:str.anchor(name)

    name 指定被创建的a标签的name属性,使用该方法创建的锚点,将会成为 document.anchors 数组的元素。

    var str = "this is a anchor tag";
    document.body.innerHTML = document.body.innerHTML + str.anchor("anchor1"); // body末尾将会追加这些内容 <a name="anchor1">this is a anchor tag</a>
    

    link

    创建一个a标签

    语法:str.link(url)

    url 指定被创建的a标签的href属性,如果url中包含特殊字符,将自动进行编码。例如 " 会被转义为 &\quot。 使用该方法创建的a标签,将会成为 document.links 数组中的元素。

    相关文章

      网友评论

        本文标题:JavaScript基础学习-字符串方法

        本文链接:https://www.haomeiwen.com/subject/uwppnttx.html