字符串的常用方法以及处理一些需求

字符串中的常用方法

所有用单引号，双引号，反引号包起来的都是字符串

let str = 'dxh goodgoodstudy daydayup';
// 每一个字符串都是由零到多个字符组成的
str.length //=>字符串长度
str[0] // 获取索引为零(第一个)字符
str[str.length - 1] //=> 获取最后一个字符 str.length-1 最后一项索引
str[10000] //=> undefined 不存在这个索引

//循环输出字符串的每一个字符
for (let i = 0; i < str.length; i++) {
    let char = str[i];
    console.log(char);
}

charAt / charCodeAt

charAt：根据索引获取指定位置的字符

charCodeAt：获取指定字符的ASCII码值（Unicode编码值）

参数： n [number] 获取字符指定的索引

返回值：返回查找到的字符

​ 找不到返回的是空字符串不是undefinde，或者对应的编码值

let str = 'dxh goodgoodstudy daydayup';
console.log(str.charAt(0)); //=>d
console.log(str[0]); //=>d
console.log(str.charAt(1000)); //=> ''
console.log(str[1000]); //=> undefined

console.log(str.charCodeAt(0)); //=>100
console.log(String.fromCharCode(100)); //=>d

substr / substring / slice

都是实现字符串截取（在原来的字符串中查找到自己想要的）

substr(n,m)：从索引n开始截取m个字符，m不写截取到末尾（后面的方法也是）

substring(n,m)：从索引n开始找到索引为m处(不含m)

slice(n,m)：和substring一样，都是找到索引为m处，但是slice可以支持负数作为索引，其余两个方法是不可以的

let str = 'dxh goodgoodstudy daydayup';
console.log(str.substr(4, 8)); //=>'goodgood'
console.log(str.substring(4, 8)); //=>'good'
console.log(str.substr(4)); //=>'goodgoodstudy daydayup' 截取到末尾
console.log(str.substring(4)); //=>'goodgoodstudy daydayup' 截取到末尾
console.log(str.substr(4,100)); //=>'goodgoodstudy daydayup' 超过索引也只截取到末尾

console.log(str.substring(4,8)); //=>'good'
console.log(str.slice(4,8)); //=>'good'
console.log(str.substring(-8,-4)); //=>'' substring不支持负数索引
console.log(str.slice(-8,-4)); //=>'dayd' slice支持负数索引 str.slice((-8)+str.length+(-4)+str.length)

indexOf / lastIndexOf / includes

验证字符是否存在

indexOf(x,y)：获取x第一次出现位置的索引，y是控制查找的起始位置的索引

lastIndexOf(x)：最后一次出现的索引

=> 没有这个字符，返回结果是-1

let str = 'dxh goodgoodstudy daydayup';
console.log(str.indexOf('d')); //0
console.log(str.lastIndexOf('d')); //21
console.log(str.indexOf('@')); //-1 不存在返回-1

if(str.indexOf('@') === -1) {
    // 字符串中不包含@这个字符
}

console.log(str.indexOf('good')); //=>4 验证整体第一次出现的位置，返回的索引是第一个字符所在的位置。
console.log(str.indexOf('good day')); //=>-1 整体没有返回-1

console.log(str.indexOf('d',10)); //=>11 查找字符串索引10以后的字符串中，'d'第一次出现的位置索引

if(!str.includes('@')) {
    console.log('当前字符串不包含@');
}

toUpperCase / toLowerCase

字符串中字母大小写的转换

toUpperCase()：转大写

toLowerCase()：转小写

let str = 'Dxh Goodgoodstudy Daydayup';
str = str.toUpperCase();
console.log(str); //=> 'DXH GOODGOODSTUDY DAYDAYUP'
str = str.toLowerCase(); 
console.log(str); //=> 'dxh goodgoodstudy daydayup'

// 完成第一个字母大写
str = str.substr(0, 1).toUpperCase() + str.substr(1);
console.log(str); //=> 'Dxh goodgoodstudy daydayup'

split

split([分隔符])：把字符串按照指定的分隔符拆分成数组（与数组中的join相对应）

split支持传递正则表达式

// 把|分隔符变为,分隔符
let str = 'day|day|up';
let ary = str.split('|'); //=> ["day", "day", "up"]
str = ary.join(',');
console.log(str);  //=>'day,day,up'

replace

replace(老字符,新字符)：实现字符串的替换（经常伴随着正则使用）

let str = '好好@学习@天天@向上';
str = str.replace('@', '-');
console.log(str); //=>'好好-学习@天天@向上' 在不使用正则表达式的情况下，执行一次replace只能替换一次字符

// 使用正则
str = str.replace(/@/g, '-');
console.log(str); //=>'好好-学习-天天-向上'

字符串常用的方法解决一些需求

1.时间字符串转换

// '2020-1-11 19:22:30' => '2020年01月11日 19时22分30秒'
let time = '2020-1-11 19:22:30';

// 方法：如果取得的数的长度小于2，则往前边加0
let addZero = val => {
    if (val.length < 2) {
        val = '0' + val;
    }
    return val
}

let x = time.split(" ");
let m = x[0].split("-");
let n = x[1].split(":");
console.log(addZero(m[0]) + "年" + addZero(m[1]) + "月" + addZero(m[2]) + "日 " + addZero(n[0]) + "时" + addZero(n[1]) + "分" + addZero(n[2]) + "秒");

2.queryURLParams

实现此方法，获取一个URL地址问号后面传递的参数信息

https://www.bilibili.com/video/av57708010?p=2

https://www.bilibili.com/video/av57708010?p=6

let url = "https://space.bilibili.com/349200371/favlist?fid=794481471&ftype=create#dxh";
let whIndex = url.indexOf('?'); // 获取?的索引
let jhIndex = url.indexOf('#'); // 获取#的索引
let whtext = url.substring(whIndex+1,jhIndex); // 截取?之后#之前的内容
let jhtext = url.substring(jhIndex+1); // 截取#之后的内容
let m = whtext.split('&'); // 将内容按照'&'拆分成数组
let ary = {};
m.forEach(item => {
    let a = item.split('='); // 循环将拆分之后的数组的每一项再安照'='拆分
    let key = a[0];
    let value = a[1];
    ary[key] = value;
});
ary['hash'] = jhtext;
console.log(ary); // {fid: "794481471", ftype: "create", hash: "dxh"}

queryURLParams：获取URL地址中问号传参的信息和哈希值

参数：url[string] 要解析的URL字符串

返回值：[object] 包含参数和哈希值信息的对象

function queryURLParams(url) {
    // 获取?和#之后的信息
    let whIndex = url.indexOf('?'),
        jhIndex = url.indexOf('#'),
        whText = '',
        jhText = '';
    // 如果#不存在，就让jhIndex等于url字符串的长度的值
    jhIndex === -1 ? jhIndex = url.length : null;
    if (whIndex >= 0) {
        // 如果?存在，就截取?之后的jhIndex之前的
        whText = url.substring(whIndex + 1, jhIndex);
    }
    jhText = url.substring(jhIndex + 1); 

    // 获取每一部分信息
    let result = {};
    jhText !== '' ? result["hash"] = jhText : null;
    if (whText !== '') {
        let ary = whText.split('&');
        ary.forEach(item => {
            let itemAry = item.split('=');
            result[itemAry[0]] = itemAry[1];
        });
    }
    return result;
}

3.实现一个验证码 数字加字母4位

验证码.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>有点low的验证码</title>
    <link rel="stylesheet" href="css/验证码.css">
</head>
<body>
    <div class="box">
        <input type="text" id="codeInp">
        <span id="codeBox">这里放验证码</span>
        <button id="changeCode">看不清换一张</button>
        <button id="test">验证</button>
        <script src="js/验证码.js"></script>
    </div>
</body>
</html>

验证码.css

* {
    margin: 0;
    padding: 0;
}

.box {
    box-sizing: border-box;
    position: absolute;
    width: 300px;
    height: 150px;
    border: 2px solid skyblue;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
}

#codeInp {
    box-sizing: border-box;
    display: block;
    padding: 0 3px;
    margin: 10px 60px;
    height: 30px;
}

#codeBox {
    background: pink;
    box-sizing: border-box;
    display: block;
    margin: 10px 60px;
    padding: 5px 60px;
    width: 166px;
    height: 30px;
    border: 1px solid skyblue;
}

#changeCode {
    box-sizing: border-box;
    display: block;
    margin: 10px auto;
}

#test {
    box-sizing: border-box;
    display: block;
    margin: 10px auto;
}

验证码.js

let codeInp = document.getElementById('codeInp');
let codeBox = document.getElementById('codeBox');
let changeCode = document.getElementById('changeCode');
let test = document.getElementById('test');
// 封装一个方法queryCode，获取四位随机的验证码，然后放到指定的盒子中
function queryCode() {
    // 准备获取范围的字符串
    let area = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
    let result = "";
    for (let i = 0; i < 4; i++) {
        // 每一次循环都获取一个随机数字索引
        let ran = Math.round(Math.random() * 61);
        // 再根据获取的索引从范围字符串中找到对应的字符，把找到的字符拼接到最后的结果中
        result += area.charAt(ran);
    }
    // 放到盒子里面
    codeBox.innerHTML = result;
}

// 第一次加载页面需要执行方法，让其显示在页面中
queryCode();

// 点击看不清按钮，需要重新执行方法重新生成新的验证码
changeCode.onclick = queryCode;

// 点击验证按钮，验证用户输入的内容和验证码是否相同，给与相关的提示，如果不一样需要重新生成验证码
test.onclick = function () {
    // 获取用户和验证码(表单元素.value/非表单元素.innerHTML 获取内容)
    let val = codeInp.value,
        code = codeBox.innerHTML;
    // 不区分大小写验证(都转换为小写)
    if (val.toLowerCase() === code.toLowerCase()) {
        alert('验证成功');
        codeInp.value = "";
        // 重新生成验证码
        queryCode();
    } else {
        alert('验证失败');
        codeInp.value = "";
        // 重新生成验证码
        queryCode();
    }
}