JavaScript从入门到放弃 第三步
作者：互联网
三、 字符串相关方法
1. indexOf()方法
indexOf()方法返回String第一次出现指定值的索引，从开始搜索fromIndex。如果找不到，则返回-1。
语法：
str.indexOf(searchValue [, fromIndex]);
searchValue：查找的值
fromIndex: 可选参数从哪个位置开始查找 如果为负数则按0算
// 例子
1. 搜索单个
let str="Hello world!"
str.indexOf('e'); // 1 返回e所在字符串中首次出现的位置
2. 搜索多个字符
let str="Hello world!"
str.indexOf('el'); // 1 返回el所在字符串中首次出现的位置,其实和e一样
3. 使用位置搜索
let str = "Hello world!"
str.indexOf('e', 4); // -1 从索引为4的位置开始搜索，没有e的出现 没找到返回-1
# 这是我们第一个遇到的 数组与字符串共有的方法
2. lastIndexOf()方法
lastIndexOf()方法返回指定子字符串在此字符串中最后一次出现处的索引，从指定的索引开始反向搜索，如果此字符串中没有这样的字符，则返回 -1。
语法：
str.lastIndexOf(searchValue[, fromIndex])；
searchValue： 一个字符串，代表要搜索的值。如果 searchValue 为空字符串，则 fromIndex 返回。
fromIndex 可选的，从指定的索引开始反向搜索从后往前搜索 如果为负数则按0算和indexOf一样 从0开始那么就从零从后往前其实就是查不到 永远返回-1
let str="Hello world!"
str.lastIndexOf('o'); // 7
str.lastIndexOf('l'); // 9
str.lastIndexOf('a'); // -1 未找到为-1
str.lastIndexOf('o', 6); // 表示从6的位置开始从后往前搜索，找到则返回index
# 这是我们第二个遇到的 数组与字符串共有的方法
3. length属性
length()方法返回字符串的长度
let str="Hello world!"
str.length
# 这是我们第一个遇到的 数组与字符串共有的属性 length是属性不是方法
4. includes()方法
includes()方法确定一个字符串是否可以在另一字符串中找到，返回值为Boolean
let str = "Hello world!";
// es5之前我们使用indexOf来判断一个字符串中是否包含另一个字符串
let isInclude = str.indexOf('o') !== -1 // 是否包含
// es6 我们使用includes来替代es5之前的方案
let isInclude = str.includes('o'); // 返回boolean值
# 这是我们第三个遇到的 数组与字符串共有的方法
5. charAt()方法
charAt()方法可返回指定位置的字符。
语法 ：str.charAt(index);
let str = 'zcy';
str.charAt();
str.charAt(0);
=> 'z' // 返回位置为0的字符
str.charAt(2);
=> 'y' // 返回位置为2的字符
str.charAt(9);
=> '' // 返回为''
注意：字符串中下标与数组类似，都是第一个字符的下标是 0，以此类推。如果参数 index 不在 0 与 string.length 之间，该方法将返回一个空字符串。
6. charCodeAt()
charCodeAt()方法返回索引i处的字符代码，与charAt()类似，可返回指定位置的字符的Unicode 16位整数编码
语法 ：str.charCodeAt(index);
let str = 'zcy';
str.charCodeAt();
str.charCodeAt(0);
=> 122 // 返回位置为0的字符的unicode编码
str.charCodeAt(2);
=> 121 // 返回位置为2的字符的unicode编码
str.charCodeAt(9);
=> NaN
注意：字符串中第一个字符的下标是 0。如果 index 是负数，或大于等于字符串的长度，则 charCodeAt() 返回 NaN
由于通用的128位字符已经使用 但是不能表示中文汉字 所以中文使用两个字节
1. 字节（Byte）是计算机信息技术用于计量存储容量的一种计量单位，通常情况下 一字节等于八位。
2. 字符是指计算机中使用的字母、数字、字和符号。
3. 计算机中储存的信息都是用二进制数表示的；而我们在屏幕上看到的英文、汉字等字符是二进制数转换之后的结果。通俗的说，按照何种规
则将字符存储在计算机中，如'z'用什么表示，称为"编码"；反之，将存储在计算机中的二进制数解析显示出来，称为"解码"，如同密码学中的加密和解密。在解码过程中，如果使用了错误的解码规则，则导致'a'解析成'b'或者乱码。
4. 字符集（Charset）：是一个系统支持的所有抽象字符的集合。字符是各种文字和符号的总称，包括各国家文字、标点符号、图形符号、数字等。
5. 字符编码（Character Encoding）：字符编码就是将符号转换为计算机可以接受的数字系统的数，称为数字代码。
6. 全角与半角：计算机发明之处及后面很长一段时间，只用应用于美国及西方一些发达国家，ASCII能够很好满足用户的需求。但是当天朝也有了计算机之后，为了显示中文，必须设计一套编码规则用于将汉字转换为计算机可以接受的数字系统的数。天朝专家把那些127号字符之后的奇异符号们（即EASCII）取消掉，规定：一个小于127的字符的意义与原来相同，但两个大于127的字符连在一起时，就表示一个汉字，前面的一个字节（他称之为高字节）从0xA1用到 0xF7，后面一个字节（低字节）从0xA1到0xFE，这样我们就可以组合出大约7000多个简体汉字了。在这些编码里，还把数学符号、罗马希腊的 字母、日文的假名们都编进去了，连在ASCII里本来就有的数字、标点、字母都统统重新编了两个字节长的编码，这就是常说的"全角"字符，而原来在127号以下的那些就叫"半角"字符了
7. Unicode（统一码、万国码、单一码、标准万国码）Unicode是字符集，UTF-32/ UTF-16/ UTF-8是三种字符编码方案
7. codePointAt()方法
codePointAt()方法与charCodeAt()类似 方法返回 一个 Unicode 编码点值的非负整数
let str = 'zcy';
str.codePointAt();
str.codePointAt(0);
=> 122 // 返回位置为0的字符的unicode编码
str.codePointAt(2);
=> 121 // 返回位置为2的字符的unicode编码
str.codePointAt(9);
=> undefined
注意：返回值是在字符串中的给定索引的编码单元体现的数字，如果在索引处没找到元素则返回 undefined, 字符串中第一个字符的下标是 0。如果 index 是负数，或大于等于字符串的长度，则 charCodeAt() 返回 undefined
8. concat()方法
concat() 方法用于连接两个或多个字符串。与数组的concat()方法类似,不会改变原有值会生成一个新值作为返回值
let a = 'a';
let b = 'b';
let name = 'qs';
let newStr1 = a.concat(b); // 'ab'
let newStr2 = a.concat(b,name); // 'abqs'
# 此处是第四个字符串与数组都有的方法
9. startsWith()方法
startsWith() 方法用于检测字符串是否以指定的子字符串开始。如果是以指定的子字符串开头返回 true，否则 false。
startsWith() 方法对大小写敏感。
用法：string.startsWith(searchvalue, start);
searchvalue：查询的值
start: 代表开始查询的位置
1.
let str = 'I love you';
str.startsWith('I');
=> true
2.
let str = 'I love you';
str.startsWith('I '); // 我们输入一个空格
=> true
3. 说明对空格敏感
let str = 'I love you';
str.startsWith('I '); // 我们输入两个空格
=> false
4. 对大小写敏感
let str = 'I love you';
str.startsWith('i'); // 我们输入两个空格
=> false
5. 指定位置查询
let str = 'I love you';
str.startsWith('l', 2); // 我们输入两个空格
=> true
10. endsWith()方法
该endsWith()方法确定字符串是否以指定字符串的字符结尾，返回true还是false
str.endsWith(searchString,length)
searchvalue：查询的值
length: 代表字符串的长度 可选参数，如果提供，则用作的长度str。默认为str.length。
let str = 'I love you';
str.endsWith('u');
=> true
let str = 'I love you';
str.endsWith('o', 4); // 实际字符串为 'I lo'
str.endsWith('o', 9); // 'I love yo'
=> true
11. match()方法
1.match()方法检索将字符串与正则表达式匹配的结果。返回值为数组，没匹配到返回null
语法：
str.match(regexp)
regexp 正则表达式对象。
如果regexp是非RegExp对象，则RegExp使用隐式转换为。new RegExp(regexp)，如果传入参数，match()直接使用该方法，则会得到一个Array带有空字符串的：[""]。
let regexp = /[A-Z]/g; // 正则后面会讲到 搜索大写字母
let str="Hello world!"
found = str.match(regexp);
=> ["H"] // 返回为数组
不写g的情况下默认匹配一个 ，写g的化匹配所有的
2.matchAll()返回一个迭代器，包括原子组里的内容，match如果匹配多个内容，是不包括原子组的内容
let url =`https://www.baidu.com
http://www.tm.com.cn
http://banban.com`
let reg = /^https?:\/\/(\w+\.)?(\w+\.)+(com|cn|net|org)$/g;
url.matchAll(reg);
// RegExpStringIterator {} 返回的是一个迭代器
for(let iterator of url.matchAll(reg)) {
console.log(iterator);
}
12. padEnd()方法
该方法会在指定字符串的尾部补全指定长度的字符,返回一个新的字符串，并不会改变原来的字符串
语法：
str.padEnd(targetLength [, padString])
str填充后的长度。如果该值小于本来的str.length，则将按原样返回当前字符串，不会截取原来的字符串；
padString: 使用什么字符串进行填充
let str = '123';
let newStr = str.padEnd(10, 0); // "1230000000" 使用0填充填充到字符串的长度为10
let newStr = str.padEnd(10); // "123 " 不指定使用什么填充默认使用空字符串来填充
let newStr = str.padEnd(3, '111'); // "123" 并不会改变原来的字符串
13. padStart()方法
该方法会在指定字符串的头部补全指定长度的字符,返回一个新的字符串，并不会改变原来的字符串
语法：
str.padStart(targetLength [, padString])
str填充后的长度。如果该值小于等于本来的str.length，则将按原样返回当前字符串，不会截取原来的字符串；
padString: 使用什么字符串进行填充
这个方法很好用比如我们一般获取当前月份的时候，如果是个位数我们就可以使用padStart来填充
例子：
let date = new Date('2020-9-9 17:13:35');
let month = `${date.getMonth() + 1}`; // 9
month.padStart(2,0); // "09" 是不是很方便
14. repeat()方法
repeat()方法返回一个新字符串,表示将原字符串重复n次
语法：
str.repeat(num);
num 为非负数，如果是小数那么向下取整
let str = 'zcy';
let newStr = str.repeat(2); // "zcyzcy"
let newStr = str.repeat(2.4); // "zcyzcy"
let newStr = str.repeat(2.9); // "zcyzcy"
# 如果repeat()方法的参数是负数或者Infinity，会报错。提示仅接受非负数
str.repeat(-1);
str.repeat(Infinity);
15. replace()方法
该replace()方法返回一个新字符串，仅替换第一个匹配项。原始字符串保持不变。
语法：
str.replace(regexp|substr, newSubstr|function);
第一个参数为正则表达式或者一个字符串，第二个参数为，将第一个参数的字符串替换成哪个字符串
let str = 'abcabc';
let newStr = str.replace('a', '啦'); // "啦bcabc"只替换一个a
let newStr = str.replace('a', () => '哈哈'); // "哈哈bcabc"
16. replaceAll()方法
该replace()方法返回一个新字符串，替换所有的匹配项。原始字符串保持不变。
语法：
str.replace(regexp|substr, newSubstr|function);
第一个参数为正则表达式或者一个字符串，第二个参数为，将第一个参数的字符串替换成哪个字符串
let str = 'abcabc';
let newStr = str.replaceAll('a', '啦'); // "啦bc啦bc" 替换所有的a
let newStr = str.replaceAll('a', () => '哈哈'); // "哈哈bc哈哈bc"
17. slice()方法
slice() 方法可提取字符串的某个部分，并以新的字符串返回被提取的部分。
语法
string.slice(start,end);
start 【可选】截取字符串的起始下标。如果是负数是从字符串的尾部开始算起的位置。-1 指字符串的最后一个字符，-2 指倒数第二个字符，以此类推。
end 【可选】截取字符串的终止下标。若未指定此参数，则要提取的字符串包括 start 到原字符串结尾的字符串。如果该参数是负数，那么是从字符串的尾部开始算起的位置。
let str = '123456789';
str.slice(); // '123456789'
str.slice(1,3); // '23'
str.slice(-1); // '9' 从最后一位开始截取，不会往后截取 之会往后截取
str.slice(-2); // '89' 从倒数第二位开始截取，截取到最后一位包括最后一位
str.slice(-2,-1); // '8' 从倒数第二位开始截取，截至到最后一位不包括最后一位
str.slice(-5,-1); // '5678' 从倒数第五位开始截取，截至到最后一位不包括最后一位
str.slice(4,2); // ''
str.slice(-5,-5); // ''
# 所以我们不难发现起始位置大于等于终止位置返回空字符串
# 此处是第五个字符串与数组共有的方法
18. substring()方法
substring() 方法用于提取字符串中介于两个指定下标之间的字符。方法返回的子串包括 start 处的字符，但不包括 stop 处的字符。
语法：
string.substring(start,stop);
start 【可选】非负的整数，截取字符串的起始下标。
stop 【可选】非负的整数，截取字符串的终止下标。若未指定此参数，则要提取的字符串包括 start 到原字符串结尾的字符串。
let str = '123456789';
str.substring(); // '123456789'
str.substring(1); // '23456789' 从下标为1的位置开始截取，截取到最后
str.substring(1,3); // '23'
str.substring(-1); // '123456789'
str.substring(-5); // '123456789'
# 如果第一个为负数 那么将这个负数看作0，相当于不截取
str.substring(1, -1); // '1'
str.substring(3, -2); // '123'
str.substring(6, -2); // '123456'
# 如果第一个为正数 第二个参数为负数 那么就是可以理解为从头开始截取，截取长度为第一个参数的长度
str.substring(-1, -1); // ''
str.substring(1, 1); // ''
# 如果参数 start 与 stop 相等，那么该方法返回的就是一个空串（即长度为 0 的字符串）
str.substring(5, 2); // '345'
str.substring(-1, 2); // '12'
# 如果 start 比 stop 大，那么该方法在提取子串之前会先交换这两个参数。
总结：如果第一个参数为负数就当0使用，如果第二个参数为负数，这忽略该参数，如果两个参数都为负数则返回空字符串
19. substr()方法
substr() 方法可在字符串中抽取从 start 下标开始的指定数目的字符。
语法：
string.substr(start,length)
start 【可选】截取字符串的起始下标。必须是数值。如果是负数，字符串的尾部开始算起的位置。也就是说，-1 指字符串中最后一个字符，-2 指倒数第二个字符，以此类推。与slice一样
length【可选】字符串中的字符数。必须是数值。如果省略了该参数，那么返回从 stringObject 的开始位置到结尾的字串。
let str = '123456789';
str.substr(); // '123456789'
str.substr(1); // '23456789'
str.substr(-1); // '9'
# 以上第一个参数与slice一样
str.substr(1,2); // '23' 从位置1开始截取 长度为2的字符串
str.substr(0,8); // "12345678" 从位置0开始截取 长度为8的字符串
str.substr(0,-1); // ''
str.substr(3,-1); // ''
str.substr(4,-2); // ''
# 长度为负数则返回空字符串
20. split()方法
split() 方法用于把一个字符串分割成字符串数组。
语法：
string.split(separator,howmany)
separator 【必需】字符串或正则表达式，从该参数指定的地方分割 stringObject。
howmany 【可选】该参数可指定返回的数组的最大长度。如果设置了该参数，返回的字符串不会多于这个参数指定的数组。如果没有设置该参数，整个字符串都会被分割，不考虑它的长度。
let str = '123456789';
str.split(''); // 如果把空字符串 ("") 用作参数，那么 string中的每个字符之间都会被分割。
// ["1", "2", "3", "4", "5", "6", "7", "8", "9"]
str.split('2'); // ["1", "3456789"]
str.split(','); // ["123456789"]
let str = '2020-12-3';
let str = '2020/12/3';
str.split(/[-\/]/); // 使用正则
21. toLowerCase()方法
toLowerCase() 方法将字符串转换为小写。
Lower: 少，减少，
let str = 'aBcDeF';
str.toLowerCase(); // "abcdef"
22. toUpperCase()方法
toUpperCase() 方法用于将小写字符转换为大写。
upper:上
let str = 'aBcDeF';
str.toUpperCase(); // "ABCDEF"
23. trim() 方法
trim()方法用于删除字符串的【头、尾】空白符，空白符包括：空格、制表符 tab、换行符等其他空白符等。trim() 方法不会改变原始字符串。
let str = " abc ";
str.trim(); // "abc"
let str = "a b c";
str.trim(); // "a b c" 不能去除中间的空格，只能去除头尾的空格
24. trimEnd()方法
trimEnd()方法,从一个字符串的末端移除空白字符。trimRight() 是这个方法的别名。
let str = " abc ";
str.trimEnd(); // " abc"
let str = "abc ";
str.trimEnd(); // "abc" 能去除尾部的空格
25. trimStart()方法
trimStart() 方法从字符串的开头删除空格。trimLeft() 是此方法的别名。
let str = " foo ";
console.log(str.length); // 8
str.trimStart() // "foo " 等同于 str.trimLeft();
console.log(str.trimStart().length); // 5
26. valueOf()方法
valueOf() 方法返回 String 对象的原始值
const stringObj = new String('foo');
console.log(stringObj); // String { "foo" }
stringObj.valueOf(); // 'foo'
其实我们平时通过字面量创建的字符串，其实就是可以理解成，系统使用new string()构造函数来实现的，在使用valueOf方法把值返回给我们
27. search()方法
// 返回第一个搜索到字符的索引 类似indexOf
let str = 'zcyz';
str.search('z'); // 0
str.search('c'); // 1
str.search('x'); // -1 未找到就是-1
可以使用正则表达式
str.search(/z/); // 0
str.search(/\d/g); // -1
str.search(/[a-z]/g); // 0
28. 一些不推荐使用的方法
# 1.fixed()
fixed()方法创建一个<tt>HTML元素，该元素使字符串以固定螺距字体显示。【不再推荐使用】，了解即可
语法：
string.fixed()
let str="Hello world!"
let html = str.fixed(); // "<tt>Hello world!</tt>"
document.write(html);
# 2.fontcolor()
该fontcolor()方法创建一个<font>HTML元素，该元素使字符串以指定的字体颜色显示。返回包含<font>HTML元素的字符串。
语法：
str.fontcolor(color);
color 将颜色表示为十六进制RGB三元组或字符串文字的字符串。
let worldString = 'Hello, world';
let html = worldString.fontcolor('red'); // '<font color="red">Hello, world</font>'
document.write(html);
console.log(worldString.fontcolor('FF00'));
# 3.fontsize()
该fontsize()方法创建一个<font>HTML元素，该元素使字符串以指定的字体大小显示。返回<font>HTML元素的字符串。
语法：
str.fontsize(size)
size: 1到7之间的整数，代表1到7之间有符号整数的字符串。如果输入小数 那么向下取整
let worldString = 'Hello, world';
let html = worldString.fontsize(2); // "<font size="2">Hello, world</font>"
document.write(html);
# 4. big()
big()方法用于把字符串显示为大号字体,该方法返回加了<big>标签的字符串
let str="Hello world!"
let html = str.big(); // 实际相当于给hello加个big标签 "<big>Hello world!</big>"
document.write(html);
# 5. anchor()
anchor(name) 方法用于创建 HTML 锚。该方法返回加了 <a> 标签的字符串, 参数将作为返回值的标签字符串name的属性值
let str = 'zcy';
str.anchor(); // <a name="undefined">zcy</a>"
str.anchor('qs'); // "<a name="qs">zcy</a>"
document.write(str.anchor('qs'));
document.querySelector('[name]').addEventListener('click', ()=>{
alert('点击了a标签');
})
# 6. blink()
blink()方法返回加了 <blink> 标签的字符串， blink() 方法用于显示闪动的字符串
目前只有 Firefox 和 Opera 浏览器支持 blink() 方法. Internet Explorer, Chrome, 以及 Safari 不支持 blink() 方法。
let str="Hello world!"
document.write(str.blink());
但是实测火狐好像也没什么效果,不管了先这样吧
# 7. bold()
bold()方法返回加了 <bold> 标签的字符串
let str="Hello world!";
let html = str.bold(); // "<b>Hello world!</b>"
document.write(html);
# 8. italics()
italics()方法创建一个<i>HTML元素，该元素使字符串变为斜体。
str.italics();
let worldString = 'Hello, world';
let html = worldString.italics(); // <i>Hello, world</i>
document.write(html);
# 9. link()
返回包含<a>HTML元素的字符串。
语法：str.link(url)
let hotText = 'MDN';
let URL = 'https://developer.mozilla.org/';
hotText.link(URL); // "<a href="https://developer.mozilla.org/">MDN</a>"
标签：返回,第三步,入门,字符,JavaScript,let,str,字符串,方法 来源： https://www.cnblogs.com/qians/p/14392661.html