乐趣区

关于javascript:js常用字符串的方法的整理查修改拼接

jiezi

前言：做我的项目中，经常须要对数据进行加工，加工成咱们想要的格局。所以整顿了一下字符串罕用的办法，忘了的时候过去看看。毕竟孔子说过，好忘性不如烂笔头。

以下为字符串罕用的办法，大抵记忆的办法就是：

  • 查某个字在字符串中的索引下标
  • 查具体的某个字符串的值
  • 查某个字符串中是否蕴含某个字（词）
  • 批改字符串进行切割
  • 批改字符串成为数组（转数组）
  • 拼接字符串
  • 等 …

字符串是类数组的货色

字符串和数组相似，也有对应的索引下标，并且通过下标能够拜访到对应的字符串的值。前面的字符串的办法，都是基于这个个性来的。

        let str = "欢迎光临"
        console.log(str.length) // 4
        console.log(str[0]); // 欢
        console.log(str[1]); // 迎
        console.log(str[2]); // 关
        console.log(str[3]); // 临
        console.log(str); // 欢迎光临

查字符串相干的办法

理论问题：如何查问一个字符串中是否蕴含某个字（词）

解决方案一：应用 indexOf 办法（数组也实用）
比方有一个字符串 str：“欢送治理”，str.indexOf(“ 欢 ”) 返回的是“欢”这个字在 str 中呈现的索引的地位下标 - 前提是如果有的话。没有的话，就会返回 -1，阐明没有这个字。所以 若 str.indexOf(“ 某个字 ”)如果返回的是 -1，就阐明字符串 str 中不存在这个字。

       let str = "中国平凡"
       console.log(str.indexOf("国")); // 1
       console.log(str.indexOf("洲")); // -1

应用 indexOf 办法存在就返回对应的首次呈现的索引，返回的值可能是 0 1 2 3 … 等, 不存在就返回 -1 若 indexOf 返回的值大于 -1 就阐明字符串中蕴含某个字（词）；如果是词的话，会返回词的首个字的索引，不过个别用来判断是否蕴含某个字，是否蕴含某个词的用法不多。indexOf 返回的首次呈现的索引，相似的 lastIndexOf 返回的最初一次呈现的索引。用法相似，不赘述

解决方案二：应用 search 办法（数组不实用）
search 办法 和 indexOf 办法差不多，有就返回对应索引，没有就返回 -1

        let str = "qwertyuiop"
        console.log(str.search('t')); // 4
        console.log(str[str.search('t')]); //t  通过索引能够拜访到对应的值
        console.log(str.search("k")); // -1

解决方案三：应用 includes 办法（数组也实用）
用来判断字符串中是否蕴含某个字，蕴含就返回 true，不蕴含就返回 false；字符串的不蕴含的办法，就在字符串的 includes 办法后面取反就行了

        let str = "你好世界"
        console.log(str.includes("好")); // true
        console.log(!str.includes("好") ); // false
        console.log(str.includes("啊")); // false

补充：charAt 查询方法 - 依据索引查对应下标的值
字符串的 str.charAt(index)办法和间接应用 str[index]办法很像。只须要传入一个索引，就可能获取拜访到对应字符串索引的值。

        let str = "早上好，又是新的一天"
        console.log(str.charAt(2) ); // 好
        console.log(str[2] ); // 好

批改字符串相干的办法

字符串切割之 -slice 办法
通过上述的 indexOf 和 search 能够失去对应的索引，有了索引就能够获取对应的值。同样的，也能够通过索引示意从第几位开始对相应的字符串进行切割。在 slice 办法中能够传入两个索引，通过两个索引截取并返回对应的新的字符串。如果只传入一个索引，就示意从传入的哪一个索引的地位，始终切割到最初

            let str = "helloWorld"
            console.log(str.slice(5,str.length)); //World  截取第五位到最初一位
            console.log(str.slice(5)); //World  如果只写一个索引参数，就默认从此索引开始截取，始终截取到最初一个
            onsole.log(str.slice(5,-2)); //Wor 若参数为正数，就从结尾处开始计算

字符串切割之 -substring 办法
substring 用法相似 slice。

            let str = "qwertyuiop"
            console.log(str.substring(3,str.length) );// rtyuiop
            console.log(str.substring(3) ); // rtyuiop  同样的和 slice 一样，如果只传入一个索引就会从以后索引始终截取到最初
            console.log(str.substring(5,-2) ); //qwert  官网上说 substring 不反对正数，貌似也反对，不过当前多用 slice

字符串切割固定长度之 -substr 办法
如果想要从某个地位，截取固定长度的字符串，应用 substr 办法最为不便。第一个参数是从哪个地位（索引）开始切割，第二个参数是切割几个字（切割的长度）

             let str = "打工人加油鸭"
            console.log(str.substr(1,4) ); // 工人加油

理论问题：仿百度搜寻关键字高亮

比方咱们搜寻打工人加油，会返回对应内容。有题目和题目形容，以题目为例，题目中呈现的搜寻关键字，咱们为其加上一个高亮显示，题目中非关键字的局部，咱们不加高亮。效果图如下：

代码附上

function editHighLight(searchWorld, title) {
            // 思路：拆成三局部 左 关键字 右（关键字高亮）let str1 = searchWorld;
            let str2 = title;
            let startWord = str1[0]; // 获取 搜寻关键字第一个结尾的字 "孙"
            let endWord = str1.charAt(str1.length - 1); // 获取 搜寻关键字最初一个完结的字 "空"
            // 拿到了搜寻关键字中的首字和尾字，在题目的 title 中进行切割   
            let startIndex = str2.indexOf(startWord); // "孙" 在形容中 首次呈现的地位索引
            let endIndex = str2.indexOf(endWord); // "空" 在形容中 首次呈现的地位索引
            // 通过索引进行切割, 并且存一份切割好的内容
            let eidtObj = {sectionOne:str2.slice(0, startIndex),
                sectionTwo:str2.slice(startIndex, endIndex + 1),
                sectionThree:str2.slice(endIndex + 1, str2.length)
            }
            // 最初返回进来
            return eidtObj
        }
        console.log(editHighLight("孙悟空", "五百年前孙悟空大闹天宫"))//{sectionOne: "五百年前", sectionTwo: "孙悟空", sectionThree: "大闹天宫"}
        console.log(editHighLight("孙悟空", "孙悟空领有七十二般变动"))//{sectionOne: "", sectionTwo:" 孙悟空 ", sectionThree:" 领有七十二般变动 "}
        console.log(editHighLight("孙悟空", "齐天大圣孙悟空"))//{sectionOne: "齐天大圣", sectionTwo: "孙悟空", sectionThree: ""}
        console.log(editHighLight("孙悟空", "孙悟空"))//{sectionOne: "", sectionTwo:" 孙悟空 ", sectionThree:""}
        // 最初在页面中搁置三个 span，别离搁置 eidtObj 对象下的 sectionOne、sectionTwo、sectionThree
        // 给 sectionTwo 独自加一个高亮色彩，就能实现相似百度的这种搜寻高亮的成果了

字符串替换之 -replace 办法

let str = "早上好，这个世界"
console.log(str.replace("早上","下午")); // 下午好，这个世界
// replace 办法辨别英文大小写

更具体的就要用正则来做了

字符转大小写办法之
转大写：toUpperCase()
转小写：toLowerCase()

// 转大小写办法不是只转一个，而是全副转换
let str = "qwert"
console.log(str.toUpperCase()) //QWERT
let str1 = "ASDF"
console.log(str1.toLowerCase()); // asdf

字符串拼接之 -concat 办法
个人感觉字符串拼接应用 concat 办法没有间接应用 加号 + 拼接好用，concat 拼接和加号 + 拼接很相似，代码如下：

let str = "你好"
console.log(str.concat(123) ) // 你好 123
console.log(str.concat(true) ) // 你好 true
console.log(str.concat("这个世界") ) // 你好这个世界

字符串去掉空格之 -trim 办法
String.trim() 办法和 vue 中的 v -model.trim 用法基本上一样。在此不赘述

字符串转数组办法之 -split 办法

 let str = "美妙的一天"
 console.log(str.split()); // ["美妙的一天"]
 console.log(str.split(""));// [" 美 "," 好 "," 的 "," 一 "," 天 "]
 let str1 = "热，爱，和，平"
 console.log(str1.split("，"));// ["热", "爱", "和", "平"]

字符串以某某结尾 / 某某结尾 -startsWith 办法 /endsWith 办法

        let str = "computer"
        console.log(str.startsWith("c") ); // true
        console.log(str.startsWith("C") ); // false
        console.log(str.endsWith("r") ); // true
        console.log(str.endsWith("R") ); // false
        /* 注意事项：startsWith 以什么什么结尾，endsWith 以什么什么结尾
            这两个办法是辨别大小写的，能够通过 toUpperCase、toLowerCase
            对立转换成大写或者小写当前，再应用 startsWith 或 endsWith 办法
        */

上述是罕用的字符串的办法，比拟残缺的字符串的办法加入 W3C 官网，最初附上传送门地址

www.w3school.com.cn/jsref/jsref…

退出移动版