[JS基础回顾] 字符串CRUD(增删改查)

• 小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。

目录

1. CRUD
2. 增
3. 删
4. 改
5. 查 str[1] indexOf 等等 返回 元素 | 位置 | 布尔值

一 CRUD 增删改查

从CRUD的定义进行解读，CRUD是指在做计算处理时的增加(Create)、读取(Retrieve)、更新(Update)和删除(Delete)几个单词的首字母简写

二 增

创建字符串: 字面量 字符串对象方式

var str = 'abc'; // 'abc'
var str1 = new String('a'); // String {'a'}
str1.toString(); // 'a'
复制代码

三 删

1) 移除str空白符 trim() trimStart() trimEnd()

trim() trimStart() trimEnd() 这三个方法可以用于移除字符串首尾的头尾空白符，空白符包括：空格、制表符 tab、换行符等其他空白符等

var str = ' a b '
str.trim(); // 'a b'
str.trimStart(); // 'a b '
str.trimEnd(); //' a b'

str.trimLeft(); // 'a b '
str.trimRight(); // ' a b'
复制代码

四 改

1) 字符串连接 + concat

var str = 'abc';
var str1 = str+'00'; // 'abc00'
str.concat('d','e'); // 'abcde'
复制代码

2) split str => 数组

var str = 'a,b;c.d';
str.split(/[,;.]/);
// ['a', 'b', 'c', 'd']

var str = 'abcd';
str.split(''); // ['a', 'b', 'c', 'd']
var str = 'abcd';
str.split(); // ['abcd']
复制代码

3) toLowerCase toUpperCase

var str = 'AbCd';
str.toLowerCase(); // 'abcd'
var str = 'AbCd';
str.toUpperCase(); // 'ABCD'
复制代码

4) 截取字符串 substr substring slice

substr slice substring 都可以用来截取字符串, 都不改变原始数据 第二个参数都为可选 前两个第一个参数都可以传入负数

4.1) slice 正序规则 不改变原始数据 两个参数都可为负数

用于提取字符串的某个部分，并以新的字符串返回被提取的部分

string.slice(start,end)
复制代码

var str = 'abc';
var str1 = str.slice(1);
console.log(str,str1);
// 'abc' 'bc'
复制代码

var str = 'abc';
var str1 = str.slice(-2,-1);
console.log(str,str1); // abc b
var str1 = str.slice(-2);
console.log(str,str1); // abc bc
复制代码

该方法返回的子串包括开始处的字符，但不包括结束处的字符

4.2) substr

substr 方法用于在字符串中抽取从开始下标开始的指定数目的字符。其语法如下： start 为负数 -1 指字符串中最后一个字符，-2 指倒数第二个字符，以此类推。

string.substr(start,length)
复制代码

var str = 'abc';
var str1 = str.substr(-1);
console.log(str,str1);
// abc c
复制代码

4.3) substring 两个参数必须为正数

substring() 方法用于提取字符串中介于两个指定下标之间的字符

string.substring(from, to)
复制代码

var str = "abcdefg";
str.substring(1,5); //'bcde'
var str1 = str.substring(1); // 'bcdefg'
console.log(str,str1); // "abcdefg"  'bcdefg'
复制代码

5) 字符串转为数字 parseInt() 和 parseFloat()

parseInt() 和 parseFloat() 方法都用于将字符串转为数字。

parseFloat("10.001")  // 10.001
parseInt("10.001") // 10
复制代码

6) 补齐 padStart padEnd

'p'.padStart(5, 'ab') // 'ababp'

'a'.padStart(5) // '    a'  不传第二个参数,默认为空格

'a'.padEnd(5,'i'); // 'aiiii'
复制代码

7) 重复 repeat

'na'.repeat(0) // ''
'a'.repeat(3) // 'aaa'
复制代码

五 查 str[1] indexOf 等等 返回 元素 | 位置 | 布尔值

1) 获取字符串指定位置的值 charAt()和charCodeAt()

charAt()和charCodeAt()方法都可以通过索引来获取指定位置的值：

• charAt() 方法获取到的是指定位置的字符；
• charCodeAt()方法获取的是指定位置字符的Unicode值

charCodeAt() 返回值是0 - 65535之间的整数，如果指定位置没有字符，将返回 NaN

扫描二维码关注公众号，回复： 13160278 查看本文章

charCodeAt 传入数字和字符串是一样的.

str.charCodeAt(0); // 97
'0'.charCodeAt('0'); // 48
'0'.charCodeAt(0); // 48
复制代码

2) charAt() 与 str[1] 区别

当index的取值不在str的长度范围内时，str[index]会返回undefined，而charAt(index)会返回空字符串；

var str = 'abc';
str[1]; // 'b'
str[3]; // undefined
str.charAt(3); // ''
复制代码

3) 检索字符串是否包含特定序列 indexOf lastIndexOf includes startsWith endsWith

indexOf lastIndexOf includes startsWith endsWith 注意：这5个方法都对大小写敏感

3.1) indexOf lastIndexOf 返回值的位置

• indexOf [正序查找] ：查找某个字符，有则返回第一次匹配到的位置，否则返回-1
• lastIndexOf [逆序查找]：查找某个字符，有则返回最后一次匹配到的位置，否则返回-1

var str = 'abcabc';
str.indexOf('a'); // 0
str.indexOf('a',3); // 3
str.indexOf('a',4); // -1

var str = 'abcabc';
str.indexOf('bc'); // 1
复制代码

3.2) includes startsWith endsWith 返回布尔置

• includes()：该方法用于判断字符串是否包含指定的子字符串
• startsWith()：该方法用于检测字符串是否以指定的子字符串开始
• endsWith：该方法用来判断当前字符串是否是以指定的子字符串结尾

var str = 'abcabc';
str.includes('abcd');
str.includes('ab');
str.includes('ab', 5);
复制代码

var str = 'abcabc';

str.startsWith('b'); // false
str.startsWith('abc'); // true

str.endsWith('bc'); // true
复制代码

4) 获取str本身 valueOf() 和 toString()

valueOf() 和 toString() 方法都会返回字符串本身的值

var str = 'abc';
str.toString(); // 'abc'
str.valueOf(); // 'abc'

复制代码

5) str模式匹配 replace() match() search()

replace replaceAll match search 方法可以用来匹配或者替换字符

var str = 'abcbc';
str.replace('bc',1); // 'a1bc'
var str = 'abcbc';
str.replaceAll('bc',1);//'a11'
复制代码

var str = 'aBCabc';
var str1 = str.replace(/ab/gi,1);
console.log(str,str1);
// 'aBCabc' '1C1c'
复制代码

var str = 'aBCabc';
str.match('ab');
// ['ab', index: 3, input: 'aBCabc', groups: undefined]
var str = 'aBCabc';
str.match('d'); // null
复制代码

var str = "abcdef";
str.search(/bcd/); // 1
var str = "abcdef";
str.search('c'); // 2
复制代码

参考

• JS 前20个常用字符串方法及使用方式
• Js中28个常用字符串方法及使用技巧

附图

总结

• indexOf [正序查找] lastIndexOf [逆序查找]
• substr slice substring 都可以用来截取字符串, 都不改变原始数据 第二个参数都为可选 前两个第一个参数都可以传入负数
• slice 正序规则 不改变原始数据 两个参数都可为负数