js--你需要知道的字符串使用方法(含es6及之后)

前言

  字符串作为 JavScript 的基本数据类型,在开发以及面试过程中作为程序员对基础掌握情况的重要考点,本文来总结一下字符串的相关属性以及用法。包含了ES6中的一些新语法特性。

正文

  1.字符串的创建

  JavaScript 中创建字符串的方法主要有两种。一种是通过字面量的方式创建,另一种是通过构造函数创建。分别如下:

    // 字面量方式
    var str = "hello world";
    console.log(str)//hello world
    console.log(typeof str);//string

    // 构造函数方式
    var strr = new String("hello  Serendipity")
    console.log(strr)//String {"hello  Serendipity"}
    console.log(typeof strr);//object

    // 两种方式区别
    var str = 'hello';
    var strr = new String('hello')
    var strrr = new String('hello')
    console.log(str == strr);//true
    console.log(str === strr);// false 两者类型不通,分别是String 和 Object 类型
    console.log(strr == strrr);//false  存放在栈中的地址不相同
    console.log(strr === strrr);//false    两者在堆中存放的值相同,但是 不是指向同一个值,同样栈中地址不同

  2.转义字符和模板字符串

  字符串中双引号里面不能包含双引号,单引号里面不能包含单引号,如果想要用到这些关键字符,需要使用转义字符表示,例如:转义字符  \'可以表示为'              \\表示为\           \\'表示为\'

        var str1 = '001'
        var str2 = '002\'这是\\\\一个字符串·'
        console.log(str1);//001
        console.log(str2);//002'这是\\一个字符串·

  同样使用转义字符可以达到换行符、回车的作用:

        //同样转义字符实现字符串换行
        var str = '<br>this \
        <br>is a \
        <br>book';
        console.log(str);//<br>this         <br>is a         <br>book
        //转义字符还可以将有意义的和没意义的字符进行转换
        //    \n是新行 \t是回车   \t水平制表符
        var st = 'this\n \ris a \tbook'
        console.log(st);//this
 
                        //is a     book

  es6中为了解决换行导致代码不规则的这种问题,引入了模板字符串,用反引号``包裹住字符串达到换行效果,同时可以直接使用类似于插值表达式的方法获取其值。如下:

        //ES6声明字符串的模板  反引号~键位
        var ss = '<i>www</i>\
        <h2>baidu</h2>.com'
        console.log(ss);//<i>www</i>
                         //<h2>baidu</h2>.com
        //使用反引号声明字符串 在反引号中不需要使用\换行》》》m模板字符串
        var host = 'www'
        var yuming = 'baidu'
        var qy = 'com';
        var str = `<i>${host}</i><h2>${yuming}</h2>.${qy}`
        console.log(str);//<i>www</i><h2>baidu</h2>.com

  3.属性

  length属性 ,返回字符串的长度,记住是属性,不是方法。

  constructor属性,对创建字符串对象的String构造函数的引用。

  prototype属性,js中通过构造函数创建的对象实例,都有一个prototype(原型)属性,这个属性是一个指针,这个指针指向一个对象,而这个对象就包含了通过构造函数所实例化的所有实例共享的属性和方法,prototype属性能让构造的实例有能力访问这些属性和方法。

  4.方法

  (1)charAt()方法,返回指定索引位置的字符。charCodeAt()方法,返回指定索引位置字符对应的unicode值。fromCharCode()方法,将Unicode转化为字符串。

    var str = "hello Serendipity"
    console.log(str.charAt(2));//l
    console.log(str.charCodeAt(2));//108
    console.log(String.fromCharCode(108));//l

  (2)concat()方法,连接两个字符串,返回连接之后的字符串。

    var str1 = "hello "
    var str2 = "serendipity"
    console.log(str1.concat(str2));//hello serendipity    

  (3)valueOf()方法,返回某个字符串对象的原始值。toString()方法,返回字符串对象值。

    var str = "hello Serendipity"
    console.log(str.valueOf());//hello Serendipity
    console.log(str.toString());//hello Serendipity
    var strr = new String("hello Serendipity")
    console.log(strr.valueOf());//hello Serendipity
    console.log(strr.toString());//hello Serendipity

  (4)subString()方法,提取字符串中两个指定索引之间的字符。substr()方法,从起始索引号提取指定数目的字符。slice()方法提取字符串的片段,并在新的字符串中返回被提取的部分。

    var str = "hello Serendippity"
    // substring(from, [to]) 方法用于提取字符串中介于两个指定下标之间的字符,方返回的子串包括 start 处的字符,
    // 但不包括 stop 处的字符,to 可选,如果省略该参数,那么返回的子串会一直到字符串的结尾。substring() 不接受负的参数。
    console.log(str.substring(2));//llo Serendippity
    console.log(str.substring(2,5));//llo
    console.log(str.substring(-1));//hello Serendippity

    // substr(start, [length]) 方法可在字符串中抽取从 start 下标开始的指定数目的字符。返回一个新的字符串,包含从 start(包括 start 所指的字符) 处开始的
    //  length 个字符。如果没有指定 length,那么返回的字符串包含从 start 到该字符串的结尾的字符。
    console.log(str.substr(2));//llo Serendippity
    console.log(str.substr(2,5));//llo S
    console.log(str.substr(-2));//ty
    
    // slice(start, [end]) 方法可提取字符串的某个部分,返回一个新的字符串。包括字符串从 start 开始(包括 start)到 end 结束(不包括 end)为止的所有字符。
    console.log(str.slice(2));//llo Serendippity
    console.log(str.slice(2,5));//llo
    console.log(str.slice(-2));//ty

  (4)indexOf()方法,返回字符串中检索指定字符串第一次出现的位置。lastIndexOf()方法,返回字符串中检索指定字符串最后一次出现的位置。includes()方法,判断字符串中是否包含指定的子字符串。

    var str = "hello serendipity"
    console.log(str.indexOf("l"));//2
    console.log(str.lastIndexOf("i"));//14
    console.log(str.includes("dipi"));//true
    console.log(str.includes("pidi"));//false

  (5)search()方法,索引与正则表达式相匹配的值。replace()方法,替换与正则表达式匹配的子串。replaceAll()方法,替换与正则表达式匹配的所有子串。match()方法,找打一个或多个正则表达式的匹配。

    var str = "hello Serendipity"
    // search()方法接收一个正则作为参数,如果字符串中能匹配正则,则返回匹配字串的起始位置,否则返回-1
    console.log(str.search(/llo/));//2
    console.log(str.search(/LLO/));//-1
    //replace()接收两个参数,第一个为需要替换的正则或者字符串,第二个参数为替换成为的内容,返回替换之后的结果
    console.log(str.replace(/l/,"o"));//heolo Serendipity
    // replaceAll()接收两个参数,第一个为需要替换的正则或者字符串,第二个参数为替换成为的内容,返回替换之后的结果,
   //相比replace,只是多了全局的作用范围,同样在replace中用正则可以实现replaceAll的效果
console.log(str.replace(/l/g,"o"));//heooo Serendipity console.log(str.replaceAll("l","o"));//heooo Serendipity

  (6)toUpperCase()方法,把字符串转为大写。toLowerCasse()方法,把字符串转为小写。toLocalLowerCase()方法和toLocalUpperCase()方法根据主机语言环境把字符串转化为相应的大小写。

    var str = "hello Serendipity"
    console.log(str.toUpperCase());//HELLO SERENDIPITY
    console.log(str.toLowerCase());//hello Serendipty
    console.log(str.toLocaleUpperCase());//HELLO SERENDIPITY
    console.log(str.toLocaleLowerCase());//hello Serendipty

  (7)trim()方法,去掉字符串两头的空格。

    var str = "   hello Serendipity   "
    console.log(str.trim());//hello Serendipty
    console.log(str.length);//23
    console.log(str.trim().length);//17

  (8)startsWith()方法,判断字符串是否以指定的字符串开始的。endsWith()方法,判断字符串是否是以指定的字符串结束的。

    var str = "hello Serendipity"
    console.log(str.startsWith("hello"));//true
    console.log(str.startsWith("seren"));//false
    console.log(str.endsWith("pity"));//true
    console.log(str.endsWith("hrllo"));//false

  (9)repeat()方法,返回一个字符串复制粘贴多次之后的新字符串。

    var str = "hello Serendipity"
    console.log(str.repeat(2));//hello Serendipityhello Serendipity

  (10)split()方法,将字符串按指定字符分割为数组

    var str = "red,blue,green"
    console.log(str.split(","));//(3) ["red", "blue", "green"]

  (11)padStart()和padEnd()方法用于补齐字符串的长度。如果某个字符串不够指定长度,会在头部或尾部补全

    var str = "123"
    //padStart()和padEnd()方法接收两个参数,第一个参数是字符串补全生效的最大长度,第二个参数是用来补全的字符串,当补齐的长度小于等于原始长度时不发生裁剪
    console.log(str.padStart(5, 'a'));//'aa123'
    console.log(str.padStart(3, 'a'));//'123'
    console.log(str.padStart(5));//'  123'
    console.log(str.padEnd(5, 'a'));//'123aa'
    console.log(str.padEnd(3, 'a'));//'123'
    console.log(str.padEnd(5));//'123  '

  (12)字符串迭代与解构

    //在 for-of 循环中可以通过这个迭代器按序访问每个字符:
    for (const c of "abcde") {
      console.log(c);
    }
    // a
    // b
    // c
    // d
    // e
    let message = "abcde";
    console.log([...message]); // ["a", "b", "c", "d", "e"]

总结

  以上就是本文的全部内容,希望给读者带来些许的帮助和进步,方便的话点个关注,小白的成长之路会持续更新一些工作中常见的问题和技术点。

 

posted @ 2021-07-11 18:38  zaisy'Blog  阅读(516)  评论(0编辑  收藏  举报