2-JavaScript中字符串的概念及其常用方法

最新推荐文章于 2021-03-13 00:18:07 发布

CoderGaoKK

最新推荐文章于 2021-03-13 00:18:07 发布

阅读量289

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/qq_35895679/article/details/106158881

版权

字符串概念

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

let str = 'helloWorld';
//每一个字符串都是由零到多个字符组成的
str.length;//=>字符串长度
str[0];//=>获取索引为0（第一个）字符
str[str.length-1];//=>获取最后一个字符str.length-1最后一项索引

str[1000];//=>undefined 不存在这个索引
//数组通过索引和对象通过属性名来获取值不存在时都返回undefined

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

字符串中常用的方法

三个维度记忆字符串的方法
- 方法的作用和含义
- 方法的实参（类型和含义）
- 方法的返回值

charAt/charCodeAt:通过索引获取某一项的值
charAt:根据索引获取指定位置的字符
charCodeAt:获取指定字符的ASII码值（Unicode编码值）

str.charAt(n):
@params:参数 – n [number]获取字符指定的索引
@return:返回值 – 返回查找到的字符
找不到返回的是空字符串不是undefined，或者对应的编码值

string.charCodeAt(n)
@params:参数 – n [number]获取字符指定的索引
@return:返回值 – 返回查找到的字符对应的ASII码值（Unicode编码值）
找不到返回的是NaN

let str = 'helloworld';

str[0];//=>"h"
str.charAt(0);//=>"h"

str[100];//=>undefined
str.charAt(100);//=>"" 找不到返回的是空字符串

//通过字符找到编码值
str.charCodeAt(0);//=>104
str.charCodeAt(100);//NaN 找不到对应的字符返回的是NaN

//String有个方法通过编码值找到字符
String.fromCharCode(104);//=>"h"

console.dir(String)
/*
ƒ String()
arguments: (...)
caller: (...)
length: 1
name: "String"
prototype: String {"", constructor: ƒ, anchor: ƒ, big: ƒ, blink: ƒ, …}
fromCharCode: ƒ fromCharCode()//通过编码值找到字符
fromCodePoint: ƒ fromCodePoint()
__proto__: ƒ ()
*/

substr/substring/slice：字符串的截取(原字符串不改变)
都是为了实现字符串的截取（在原来字符串中查找到自己想要的）
2.1 substr(n,m):从索引n开始截取m个字符，m不写截取到末尾（后面方法也是）
2.2 substring(n,m):从索引n开始找到索引为m处（不含m）
2.3 slice(n,m):和substring一样，都是找到索引为m处，但是slice可以支持负数作为索引，其余两个方法是不可以的。

let str = 'helloworld';
console.log(str.substr(1,3));//=>ell
console.log(str.substring(1,3));//=>el
console.log(str.substr(2));//=>lloworld
console.log(str.substring(2,100));//=>lloworld

console.log(str.substring(1,3));//=>el
console.log(str.slice(1,3));//=>el
console.log(str.substring(-3,-1));//=>''空字符串
//负数索引相当于与str.length相加后的索引
console.log(str.slice(-3,-1));//=>rl

indexOf/lastIndexOf/includes：验证字符是否存在
（字符串中的indexOf/lastIndexOf兼容所有的浏览器，数组中的这2个方法仅支持IE8以上）
3.1 indexOf(x,y):获取x第一次出现位置的索引，y是控制查找的起始位置索引(从前向后找)
string.lastIndexOf(searchvalue,start);从后开始数star
3.2 lastIndexOf(x,y):最后一次出现位置的索引（从后向前找）
string.indexOf(searchvalue,start);从前开始数star
indexOf/lastIndexOf – @return:没有这个字符返回-1，有就返回第一次/最后一次出现的位置索引
3.3 includes():是否包含，返回布尔值(ES6)

let str = 'helloaworld';
console.log(str.indexOf('ll'));//=>2
console.log(str.lastIndexOf('l'));//=>9
console.log('a',3);

console.log(str.indexOf('k'));//=>-1
console.log(str.lastIndexOf('k'));//=>-1
console.log(str.indexOf('oa'));//=>4
console.log(str.lastIndexOf('oa'));//=>4

if(str.includes('k')){
    console.log('yes');
}else{
    console.log('no');
}

toUpperCase/toLowerCase：字符串中字母的大小写转换(原字符串不改变)
toUpperCase():转大写
toLowerCase():转小写

let str = 'helloaworld';
str = str.toUpperCase();
console.log(str);//=>HELLOAWORLD
str = str.toLowerCase();
console.log(str);//=>helloaworld

str = str.substr(0, 1).toUpperCase() + str.substr(1);
console.log(str);//Helloworld

split()：把字符串按照指定的分隔符拆分成数组（和数组中的join相对应）
split([分隔符]):支持传递正则表达式

//需求：把|分隔符变为逗号分隔符
let str = 'music|movie|food|sport';

//实现以上需求：
let ary=str.split('|');
console.log(ary);//=>[ 'music', 'movie', 'food', 'sport' ];

将数组转换为逗号拼接的字符串的三种方法：

ary.toString()
ary.join() – 参数为空时默认是逗号拼接
ary.join(’,’)

//1. str=ary.toString();
//2. str=ary.join();
str=ary.join(',');//3.
console.log(str);//=>'music,movie,food,sport'

replace(searchvalue,newvalue):将字符串中的searchvalue替换为newvalue(返回替换后的字符串，原来的字符串不变)
string.replace(searchvalue,newvalue)
searchvalue:必须。规定子字符串或要替换的模式的 RegExp 对象。
请注意，如果该值是一个字符串，则将它作为要检索的直接量文本模式，而不是首先被转换为 RegExp 对象。
newvalue:必需。一个字符串值。规定了替换文本或生成替换文本的函数。
replace(老字符,新字符):实现字符串的替换

let a = 'aaabc';
let b = a.replace('a','k');
console.log(a);//'aaabc'
console.log(b);//'kaabc'  replace()调用一次只替换一个

//需求：把@分隔符变为+分隔符
let str = 'music@movie@food@sport';
str = str.replace('@', '+');
//在不使用正则表达式的情况下，调用一次replace只能替换一次
console.log(str);//=>music+movie@food@sport

str=str.replace(/@/g,'+')
console.log(str);//=>music+movie+food+sport

字符串中的其它常用方法

控制台输出String.prototype查看字符串的所有方法，在MDN网站中可以查看各个方法如何使用。

String.prototype
/*
constructor: ƒ String()
anchor: ƒ anchor()
big: ƒ big()
blink: ƒ blink()
bold: ƒ bold()
charAt: ƒ charAt()
charCodeAt: ƒ charCodeAt()
codePointAt: ƒ codePointAt()
concat: ƒ concat()
endsWith: ƒ endsWith()
fontcolor: ƒ fontcolor()
fontsize: ƒ fontsize()
fixed: ƒ fixed()
includes: ƒ includes()
indexOf: ƒ indexOf()
italics: ƒ italics()
lastIndexOf: ƒ lastIndexOf()
link: ƒ link()
localeCompare: ƒ localeCompare()
match: ƒ match()
matchAll: ƒ matchAll()
normalize: ƒ normalize()
padEnd: ƒ padEnd()
padStart: ƒ padStart()
repeat: ƒ repeat()
replace: ƒ replace()
search: ƒ search()
slice: ƒ slice()
small: ƒ small()
split: ƒ split()
strike: ƒ strike()
sub: ƒ sub()
substr: ƒ substr()
substring: ƒ substring()
sup: ƒ sup()
startsWith: ƒ startsWith()
toString: ƒ toString()
trim: ƒ trim()
trimStart: ƒ trimStart()
trimLeft: ƒ trimStart()
trimEnd: ƒ trimEnd()
trimRight: ƒ trimEnd()
toLocaleLowerCase: ƒ toLocaleLowerCase()
toLocaleUpperCase: ƒ toLocaleUpperCase()
toLowerCase: ƒ toLowerCase()
toUpperCase: ƒ toUpperCase()
valueOf: ƒ valueOf()
Symbol(Symbol.iterator): ƒ [Symbol.iterator]()
*/

练习题：实现一些常用的需求–将时间字符串变为自己需要的格式呈现出来

let time = '2020-4-18 12:6:20';
//=>变为自己需要呈现的格式，例如：
//"2020年4月18日 12时6分20秒"
//"2020年4月18日"
//"04/18 12:06"

方案一：一路replace

let time = '2020-4-18 12:6:20';
time = time.replace('-', '年').replace('-', '月').replace(' ', '日 ').replace(':', '时').replace(':', '分') + '秒';
console.log(time);//2020年4月18日 12时6分20秒

方案二：获取到年月日小时分钟秒这几个值后，最后想拼成什么效果就拼成什么

let time = '2020-5-18 12:6:20';
//获取值的方法一：基于indexOf获取制定字符索引，基于substring一点点截取
let n = time.indexOf('-');
let m = time.lastIndexOf('-');
let x = time.indexOf(' ');
let y = time.indexOf(':');
let z = time.lastIndexOf(':');

let year = time.substring(0, n);
let month = time.substring(n + 1, m);
let day = time.substring(m + 1, x);
let hour = time.substring(x + 1, y);
let minute = time.substring(y + 1, z);
let second = time.substring(z + 1);
console.log(year, month, day, hour, minute, second);

//获取值的方法二：利用split()一项项拆分
let n = time.split(' ');//[ '2020-5-18', '12:6:20' ] 
let m = n[0].split('-');//[ '2020', '5', '18' ]
let x = n[1].split(':');// [ '12', '6', '20' ]
console.log(n, m, x);

//获取值的方法三：利用正则 ?: 问号+冒号：代表只匹配不捕获   |竖线：代表或者  g表示全局
let ary = time.split(/(?: |-|:)/g)
console.log(ary);//[ '2020', '5', '18', '12', '6', '20' ]

time = ary[0] + '年' + ary[1] + '月' + ary[2] + '日';
console.log(time);//2020年4月18日

不足十位补零

//第一种实现方法：
let addZero=val=>{
    /*
     if(val.length<2){
         val='0'+val;
     }*/
     //简写为一行代码
    val.length<2?val='0'+val:val;
    return val;
}

//第一种的优化方法：
function addZero(val){
    return val.length < 2 ? val = '0' + val : val;
}

//优化方法简写：
let addZero = val => val.length < 2 ? val = '0' + val : val;

//最终结果拼接：
time = ary[0] + '年' + addZero(ary[1]) + '月' + addZero(ary[2]) + '日';
console.log(time);//2020年04月18日

练习题：实现一个方法 queryUPLParameter获取一个URL地址问号后面传递的参数信息

'http://wwww.baidu.com/index.html?lx=1&name=study&teacher=best#box'

1.一开始的做法

let url = 'http://wwww.baidu.com/index.html?lx=1&name=study&teacher=best#box';

//1.获取问号或者井号后面的值
let askIndex = url.indexOf('?');
let wellIndex = url.indexOf("#");
let askTxt = url.substring(askIndex + 1, wellIndex);
let wellTxt = url.substring(wellIndex + 1);

//2.问号后面值的详细处理
let result = {};
let askAry = askTxt.split('&');
console.log(askAry);//[ 'lx=1', 'name=study', 'teacher=best' ]
askAry.forEach(item => {
    let n = item.split("=");
    let key = n[0];
    let value = n[1];
    result[key] = value;
});
console.log(result);//{ lx: '1', name: 'study', teacher: 'best' }
result['HASH'] = wellTxt;
console.log(result);//{ lx: '1', name: 'study', teacher: 'best', HASH: 'box' }

2.优化封装函数:这个方法在实际的项目中可以直接用的

封装函数时要考虑几种情况：
1.没有#的：http://wwww.baidu.com/index.html?lx=1&name=study&teacher=best
2.没有？的：http://wwww.baidu.com/index.html#box
这些情况在封装函数时都要考虑到

/*
queryURLParams:获取URL地址中问号传参的信息和哈希值
@params
    url[string] 要解析的URL字符串
@return
    [object] 包含参数和哈希值信息的对象
by xxx on 2020/05/18 12:00
*/

function queryURLParams(url) {

    //1.获取？和#后面的信息
    let askIn = url.indexOf("?"),
        wellIn = url.indexOf('#'),
        askTxt = '',
        wellTxt = '';

    //#不存在或者存在都可以
    wellIn === -1 ? wellIn = url.length : null;
    //？存在
    askIn >= 0 ? askTxt = url.substring(askIn + 1, wellIn) : null;
    wellTxt = url.substring(wellIn + 1);
    /*
    if (askIn >= 0) {
        //?存在
        askTxt = url.substring(askIn + 1, wellIn);
    }
    */
    
    //2.获取每一部分信息
    let result = {};
    wellTxt !== '' ? result['HASH'] = wellTxt : null;
    if (askTxt !== '') {
        let ary = askTxt.split('&');
        ary.forEach(item => {
            let itemAry = item.split('=');
            result[itemAry[0]] = itemAry[1];
        })
    }
    return result;
}
let url = 'http://wwww.baidu.com/index.html?lx=1&name=study&teacher=best#box';
let url1 = 'http://wwww.baidu.com/index.html#box';
let url2 = 'http://wwww.baidu.com/index.html?lx=1&name=study&teacher=best';

console.log(queryURLParams(url));//{ HASH: 'box', lx: '1', name: 'study', teacher: 'best' }
console.log(queryURLParams(url1));//{ HASH: 'box' }
console.log(queryURLParams(url2));//{ lx: '1', name: 'study', teacher: 'best' }

3.二次封装的方法：基于正则封装的才是最好的

function queryURLParams(url){
    let result ={},
        reg1=/([^?=&#]+)=([^?=&#]+)/g,
        reg2=/#([^?=&#]+)/g;
    url.replace(reg1,(n,x,y)=>result[x]=y);
    url.replace(reg2,(n,x)=>result['HASH']=x);
    return result;
}
let url = 'http://wwww.baidu.com/index.html?lx=1&name=study&teacher=best#box';
let url1 = 'http://wwww.baidu.com/index.html#box';
let url2 = 'http://wwww.baidu.com/index.html?lx=1&name=study&teacher=best';
let url3 = 'http://wwww.baidu.com/index.html';
console.log(queryURLParams(url));//{ HASH: 'box', lx: '1', name: 'study', teacher: 'best' }
console.log(queryURLParams(url1));//{ HASH: 'box' }
console.log(queryURLParams(url2));//{ lx: '1', name: 'study', teacher: 'best' }
console.log(queryURLParams(url3));//{}

其它方法一：利用正则(my)

let url = 'http://wwww.baidu.com/index.html?lx=1&name=study&teacher=best#box';
let n = url.split("?");
let ary = n[1].split(/(?:=|&|#)/g);
let res = {};
let well = ary[ary.length - 1];
//splice原数组会改变，返回截取的片段
ary.splice(ary.length - 1, 1, 'HASH', well);
console.log(ary);//['lx','1','name','study','teacher','best','HASH','box']
/*
for(let i=0;i<ary.length;i++){
    let key=null;
    let value=null;
    if(i%2==0){
     key=ary[i];
     value=ary[i+1];
     res[key]=value;
    }
}
*/
//for循环可以用forEach()来替代
ary.forEach((item, index) => {
    let key=null;
    let value=null;
    if (index % 2 === 0) {
        key = item;
        value = ary[index + 1];
    }else{
        return;//如果没有这个return，最后的结果中第二项就有null: null
    }
    //index%2===0?(key = item,value = ary[index + 1]):null;//{ lx: '1', null: null, name: 'study', teacher: 'best', HASH: 'box' }
    res[key]=value;
});
console.log(res);//{ lx: '1', name: 'study', teacher: 'best', HASH: 'box' }

其它方法二：封装函数(my)

let url = 'http://wwww.baidu.com/index.html?lx=1&name=study&teacher=best#box';
let urlSplice = url => {
    let n = url.split("?");
    let ary = n[1].split(/(?:=|&|#)/g);
    let res = {};
    let well = ary[ary.length - 1];
    ary.splice(ary.length - 1, 1, 'HASH', well);
    ary.forEach((item, index) => {
        let key = null;
        let value = null;
        if (index % 2 === 0) {
            key = item;
            value = ary[index + 1];
        } else {
            return;
        }
        res[key] = value;
    });
    return res;
}
let result = urlSplice(url);
console.log(result);//{ lx: '1', name: 'study', teacher: 'best', HASH: 'box' }