Js操作string

String 里有什么

console.log(Object.getOwnPropertyNames(String))
console.log(Object.getOwnPropertyNames(String.prototype))
console.log(Object.getOwnPropertyNames(new String()))	

(6) ['length', 'name', 'prototype', 'fromCharCode', 'fromCodePoint', 'raw']
(52) ['length', 'constructor', 'anchor', 'at', 'big', 'blink', 'bold', 'charAt', 'charCodeAt', 'codePointAt', 'concat', 'endsWith', 'fontcolor', 'fontsize', 'fixed', 'includes', 'indexOf', 'isWellFormed', 'italics', 'lastIndexOf', 'link', 'localeCompare', 'match', 'matchAll', 'normalize', 'padEnd', 'padStart', 'repeat', 'replace', 'replaceAll', 'search', 'slice', 'small', 'split', 'strike', 'sub', 'substr', 'substring', 'sup', 'startsWith', 'toString', 'toWellFormed', 'trim', 'trimStart', 'trimLeft', 'trimEnd', 'trimRight', 'toLocaleLowerCase', 'toLocaleUpperCase', 'toLowerCase', 'toUpperCase', 'valueOf']
['length']

!String.png

String 自身属性

String.prototype

String.prototype 上有很多实用的方法，以下是一些常见的：

字符串查找方法 11

• charAt(index)
  • 描述：返回指定索引处的字符。如果索引超出范围，返回空字符串。
  • 示例：'hello'.charAt(1) 返回 'e'
• charCodeAt(index)
  • 描述：返回指定索引处字符的 Unicode 编码值。如果索引超出范围，返回 NaN。
  • 示例：'hello'.charCodeAt(1) 返回 101（字符 'e' 的 Unicode 编码）
• codePointAt(pos)
  • 描述：返回一个指定字符串位置的 Unicode 编码点值的非负整数。对于超出范围的索引，返回 undefined。
  • 示例：'a'.codePointAt(0) 返回 97
• indexOf(searchString, position)
  • 描述：返回指定值（子字符串）首次出现的索引号，从指定位置开始搜索。如果未找到，则返回 -1。
  • 示例：'hello'.indexOf('l') 返回 2
• lastIndexOf(searchString, position)
  • 描述：返回指定值（子字符串）最后一次出现的索引号，从指定位置开始搜索。如果未找到，则返回 -1。
  • 示例：'hello'.lastIndexOf('l') 返回 3
• startsWith(searchString, position)
  • 描述：判断当前字符串是否以指定的子字符串开头。可指定开始搜索的位置。
  • 示例：'hello'.startsWith('he') 返回 true
• endsWith(searchString, length)
  • 描述：判断当前字符串是否以指定的子字符串结尾。可指定搜索的长度。
  • 示例：'hello'.endsWith('lo') 返回 true
• includes(searchString, position)
  • 描述：判断当前字符串是否包含指定的子字符串。可指定开始搜索的位置。
  • 示例：'hello'.includes('ll') 返回 true
• match
• matchAll
• search

字符串截取方法 3

• slice(start, end)
  • 描述：提取字符串的某个部分，并以新的字符串返回被提取的部分。不改变原字符串。start 为开始提取的索引，end 为结束提取的索引（不包括该索引处的字符）。如果 end 省略，则提取到字符串末尾。
  • 示例：'hello'.slice(1, 4) 返回 'ell'
• substring(start, end)
  • 描述：返回一个字符串在开始索引到结束索引之间的一个子集，不包括结束索引处的字符。如果 start 大于 end，则自动交换这两个参数。不改变原字符串。
  • 示例：'hello'.substring(1, 4) 返回 'ell'
• substr(start, length)
  • 描述：从字符串中截取从 start 索引开始的指定 length 的字符。如果 length 为负数，则返回空字符串。
  • 示例：'hello'.substr(1, 3) 返回 'ell'

字符串替换方法

• replace(searchValue, replaceValue)
  • 描述：在字符串中查找匹配项，然后使用新的子字符串替换匹配项。searchValue 可以是字符串或正则表达式，replaceValue 可以是字符串或函数。如果 searchValue 是字符串，则只替换第一个匹配项；如果是正则表达式，使用全局标志（g）可以替换所有匹配项。
  • 示例：'hello'.replace('l', 'a') 返回 'healo'；'hello'.replace(/l/g, 'a') 返回 'heaao'

字符串转换方法 7

• toLowerCase()
  • 描述：将字符串转换为小写。
  • 示例：'HeLLo'.toLowerCase() 返回 'hello'
• toUpperCase()
  • 描述：将字符串转换为大写。
  • 示例：'HeLLo'.toUpperCase() 返回 'HELLO'
• toLocaleLowerCase()
  • 描述：根据本地环境的大小写规则，将字符串转换为小写。与 toLowerCase() 类似，但在某些语言中可能有细微差别。
  • 示例：'HeLLo'.toLocaleLowerCase() 返回 'hello'
• toLocaleUpperCase()
  • 描述：根据本地环境的大小写规则，将字符串转换为大写。与 toUpperCase() 类似，但在某些语言中可能有细微差别。
  • 示例：'HeLLo'.toLocaleUpperCase() 返回 'HELLO'
• trim()
  • 描述：去除字符串两端的空白字符，包括空格、制表符、换行符等。
  • 示例：' hello '.trim() 返回 'hello'
• trimStart() / trimLeft()
  • 描述：去除字符串左侧的空白字符。
  • 示例：' hello'.trimStart() 返回 'hello'
• trimEnd() / trimRight()
  • 描述：去除字符串右侧的空白字符。
  • 示例：'hello '.trimEnd() 返回 'hello'

字符串分割方法 1

• split(separator, limit)
  • 描述：根据指定的分隔符将字符串分割成数组。separator 可以是字符串或正则表达式，limit 用于指定返回数组的最大长度。
  • 示例：'hello world'.split(' ') 返回 ['hello', 'world']

字符串填充方法

• padStart(targetLength, padString)
  • 描述：用指定的字符串填充当前字符串，直到达到目标长度。填充在字符串的开头进行。
  • 示例：'5'.padStart(3, '0') 返回 '005'
• padEnd(targetLength, padString)
  • 描述：用指定的字符串填充当前字符串，直到达到目标长度。填充在字符串的末尾进行。
  • 示例：'5'.padEnd(3, '0') 返回 '500'

字符串重复方法

• repeat(count)
  • 描述：将当前字符串重复指定次数，并返回新的字符串。
  • 示例：'ha'.repeat(3) 返回 'hahahaha'

字符串模板方法

• anchor(name)
  • 描述：创建一个 HTML 锚点，用于创建超链接。
  • 示例：'hello'.anchor('anchor1') 返回 '<a name="anchor1">hello</a>'
• big()
  • 描述：创建一个大号文本的 HTML 字符串。
  • 示例：'hello'.big() 返回 '<big>hello</big>'
• blink()
  • 描述：创建一个闪烁文本的 HTML 字符串。
  • 示例：'hello'.blink() 返回 '<blink>hello</blink>'
• bold()
  • 描述：创建一个粗体文本的 HTML 字符串。
  • 示例：'hello'.bold() 返回 '<b>hello</b>'
• fixed()
  • 描述：创建一个等宽字体文本的 HTML 字符串。
  • 示例：'hello'.fixed() 返回 '<tt>hello</tt>'
• fontcolor(color)
  • 描述：创建一个指定颜色文本的 HTML 字符串。
  • 示例：'hello'.fontcolor('red') 返回 '<font color="red">hello</font>'
• fontsize(size)
  • 描述：创建一个指定大小文本的 HTML 字符串。
  • 示例：'hello'.fontsize(4) 返回 '<font size="4">hello</font>'
• italics()
  • 描述：创建一个斜体文本的 HTML 字符串。
  • 示例：'hello'.italics() 返回 '<i>hello</i>'
• link(url)
  • 描述：创建一个超链接文本的 HTML 字符串。
  • 示例：'hello'.link('https://www.example.com') 返回 '<a href="https://www.example.com">hello</a>'
• small()
  • 描述：创建一个小号文本的 HTML 字符串。
  • 示例：'hello'.small() 返回 '<small>hello</small>'
• strike()
  • 描述：创建一个删除线文本的 HTML 字符串。
  • 示例：'hello'.strike() 返回 '<strike>hello</strike>'
• sub()
  • 描述：创建一个下标文本的 HTML 字符串。
  • 示例：'hello'.sub() 返回 '<sub>hello</sub>'
• sup()
  • 描述：创建一个上标文本的 HTML 字符串。
  • 示例：'hello'.sup() 返回 '<sup>hello</sup>'

字符串编码方法

• anchor(name)
  • 描述：对字符串进行 URI 编码。
  • 示例：'https://www.example.com?name=hello world'.encodeURI() 返回 'https://www.example.com?name=hello%20world'
• encodeURIComponent()
  • 描述：对 URI 组件进行编码。
  • 示例：'hello world'.encodeURIComponent() 返回 'hello%20world'
    这些方法为我们处理字符串提供了强大的功能，可以根据实际需求选择合适的方法来操作字符串。

JavaScript 字符串的操作

JavaScript 中对字符串（String）的操作非常丰富，以下是一些基本的字符串操作方法：

1. 连接字符串：
   • 使用 + 操作符：var str = "Hello" + "World";
   • 使用 concat() 方法：var str = "Hello".concat("World");
2. 字符串长度：
   • 使用 length 属性：var str = "Hello"; console.log(str.length); // 输出 5
3. 字符串查找：
   • indexOf()：返回指定值第一次出现的索引，如果未找到则返回 -1。
   • lastIndexOf()：返回指定值最后一次出现的索引，如果未找到则返回 -1。
   • includes()：检查字符串是否包含指定的子字符串，返回布尔值。
   • startsWith()：检查字符串是否以指定的子字符串开始，返回布尔值。
   • endsWith()：检查字符串是否以指定的子字符串结束，返回布尔值。
4. 字符串替换：
   • replace()：替换字符串中满足条件的部分。
   • replaceAll()：替换字符串中所有满足条件的部分。
5. 字符串分割：
   • split()：使用指定的分隔符将字符串分割成数组。
6. 字符串转换：
   • toLowerCase()：转换为小写。
   • toUpperCase()：转换为大写。
   • trim()：去除字符串两端的空白字符。
7. 字符串截取：
   • slice()：提取字符串的某个部分。
   • substring()：提取字符串中的子串。
   • substr()：提取字符串中指定位置的子串。
8. 字符串填充：
   • padStart()：用另一个字符串填充当前字符串（可重复），以便结果字符串达到给定的长度。
   • padEnd()：用另一个字符串填充当前字符串（可重复），以便结果字符串达到给定的长度。
9. 字符串重复：
   • repeat()：返回一个新字符串，它是将原字符串重复指定次数后的结果。
10. 字符串比较

• localeCompare()：用本地特定顺序进行字符串比较。

1 长度 & 查找单个字符

var str = "Hello world"
console.log(str.length)
//在控制台输出长度为11
console.log(str[0])
//输出H
console.log(str.charAt(0))
//输出H
console.log(str[20])
console.log(str.charAt(20))
//undefined
//(空字符串)

2 修改字符串

字符串定义之后是可以针对单个索引的值进行修改的

var str = "Hello world"
str[1] = "O"
console.log(str[1])
//输出Hello world

2.1 小写toLowerCase & ## 大写toUpperCase

var str = "Hello World"
console.log(str.toLowerCase());
//hello world
console.log(str.toUpperCase());
//HELLO WORLD

3 查找字符串

3.1 查找字符串所在位置indexOf

str.indexOf(searchValue [, fromIndex] )

• 从fromIndex开始，查找searchValue的索引；
• 如果没有找到，那么返回-1；

var str = "Hello World"
//找o，从索引值为1开始查找
console.log(str.indexOf("o", 1));
//4
//找jack，找不到
console.log(str.indexOf("jack", 0));
//-1

3.2 是否包含字符串includes

str.includes(searchString [, position] )

• 从position位置开始查找searchString，
• 根据情况返回 true 或 false
• ES6 新特性

var str = "Hello World"
console.log(str.includes("o"))
//true

3.3 是否XXX字符串开头

str.startsWith(searchString[, postion])

• 从position位置开始，判断字符串是否以searchString开头
• 根据情况返回 true 或 false
• ES6新特性

3.4 是否XXX字符串结尾

str.endsWith(searchString[, length])

• 在length长度内，判断字符串是否以searchString结尾
• 根据情况返回 true 或 false
• ES6新特性

var msg = "Hello World"
console.log(msg.endsWith("o"))
//false 不是以o结尾的
console.log(msg.endsWith("o",5))
//true 

4 替换字符串replace

stringObject.replace(regexp/substr,replacement)

• 查找到对应的字符串，并且使用新的字符串进行替换；
• 可以使用正则表达式，
• replacement 也可以传入函数来替换 ，其中 $ 需要符合正则语法
  • $1、$2、…、$99 与 regexp 中的第 1 到第 99 个子表达式相匹配的文本
  • $ 对应前面正则里的()
• 返回新字符串，不修改原字符串
• JavaScript replace() 方法

var msg = "Hello World"
console.log(msg.replace("Hello","HI"))
console.log(msg)
//HI World
//Hello World

使用正则交换2个单词

var msg = "Hello World"
console.log(msg.replace(/(\w+)\s* \s*(\w+)/g, "$2 $1"))
//World Hello

把字符串中所有单词的首字母都转换为大写

msg = 'aaa bbb ccc';
msg2 = name.replace(/\b\w+\b/g, function(word){
	console.log(word)
	return word.substring(0,1).toUpperCase()+word.substring(1);}
)
//aaa
//bbb
//ccc
console.log(msg,msg2)
//aaa bbb ccc Aaa Bbb Ccc

可以看到function里是正则找到一个字符串处理一个字符串。
str.search() 和 str.match() 也可以使用正则表达式，详见RegExp

var str="Visit Runoob!"; 
var n=str.search("Runoob");
//6

var str="The rain in SPAIN stays mainly in the plain"
var n=str.match(/ain/g);
//['ain', 'ain', 'ain']

5 截取字符串subStr &substring &slice

方法	入参	负值参数
slice(start,end)	从start到end（不含end）	负值视为从字符串尾部开始算
substring(start,end)	从start到end（不含end）	负值视为0
substr(start,length)	从start开始获取length长度的字符串	start可以是负值

5.1 slice

string.slice(start,end)

• 可提取字符串的某个部分，并以新的字符串返回被提取的部分
• 入参可以负值，负值时，从字符串尾部开始计算
• end省略时，默认为字符串尾部

//chrome控制台
var a = '0123456789'
a.slice(2,1)
//2所在的位置是'2'，1所在的位置是'1'，从2=>1，方向相反，返回为空
//""
a.slice(-2,1)
//-2所在的位置是'8'，1所在的位置是'1'，从8=>1，方向相反，返回为空
//""
a.slice(-2,-1)
//-2所在的位置是'8'，-1所在的位置是'9'，从8=>9，方向正常，返回为'8'
//"8"

5.2 substring

string.substring(start,end)

• substring() 方法用于提取字符串中介于两个指定下标之间的字符
• start end 非负整数 end比要提取的子串的最后一个字符在 string 中的位置多 1
• end省略时，默认为字符串尾部
• 如果 start 和 end 有负数，那么会把该参数自动转为0
• 如果 start 比 end 大，那么该方法在提取子串之前会先交换这两个参数
• 如果 start 和 end 有正小数，那么会把该参数向下取整
• 如果 start 和 end 有字符串，那么会先进行parseInt()，如果转换结果为NaN，那么就转换为0，其余情况继续上述规则

//chrome控制台
var a = '0123456789'
a.substring(1,5)
"1234"

5.3 substr

string.substr(start,length)

• substr() 方法可在字符串中抽取从 start 下标(包括)开始的指定数目的字符
• start可以取负值，表示从字符串尾部往头部开始数(从右到左，注意是从1开始，比如-1 指字符串中最后一个字符)，但是截取长度还是从左到右，如果超过最末端就到最末端结束
• 如果length为负值，那么会直接当成0处理
• 如果省略length参数，那么返回从string的开始位置到结尾的字串

6 拼接字符串concat

string.concat(string2, string3[, ..., stringN]);

• 将两个或多个字符串，并返回一个新的单字符串
• Array也有该方法

var str = "Hello".concat("-World","-aaa")
console.log(str)
//Hello-World-aaa

7 字符串分割split

str.split([separator[, limit] ] )

• separator：以什么字符串就行分割，也可以是正则表达式；
• limit：限制返回片段的数量 ，忽略时返回全部
• 返回一个包含结果集的数组

var msg = "Hello World"
console.log(msg.split(" ",2))
// ['Hello', 'World']

8 删除首尾空格trim

var msg = "           Hello World            "
console.log(msg.trim())
//Hello World

JavaScript中常见的字符串（String）方法

1. String.prototype.charAt(index)：返回指定位置的字符。
2. String.prototype.concat(value)：连接两个或多个字符串。
3. String.prototype.slice(start, end)：提取字符串的某个部分，返回一个新字符串。
4. String.prototype.indexOf(searchValue, fromIndex)：返回指定值在调用该方法的字符串中首次出现的位置。
5. String.prototype.lastIndexOf(searchValue, fromIndex)：返回指定值在调用该方法的字符串中最后出现的位置。
6. String.prototype.toLowerCase()：将所有大写字母转换为小写字母。
7. String.prototype.toUpperCase()：将所有小写字母转换为大写字母。
8. String.prototype.trim()：删除字符串两端的空白字符。
9. String.prototype.trimStart()：删除字符串开头的空白字符。
10. String.prototype.trimEnd()：删除字符串末尾的空白字符。
11. String.prototype.replace(searchValue, newValue)：在字符串中查找匹配的子字符串，并将其替换为新的子字符串。
12. String.prototype.split(separator, limit)：使用指定的分隔符将字符串分割成子字符串数组。
13. String.prototype.substring(indexStart, indexEnd)：提取字符串中两个指定索引之间的字符。
14. String.prototype.includes(searchValue, fromIndex)：检查一个字符串是否包含在另一个字符串中，并根据情况返回true或false。
15. String.prototype.repeat(count)：将字符串重复指定次数。
16. String.prototype.startsWith(searchValue, position)：检查字符串是否以指定的子字符串开始。
17. String.prototype.endsWith(searchValue, length)：检查字符串是否以指定的子字符串结束。

正则

以下是一些与正则表达式相关的字符串操作方法：

1. match(regexp)

• 描述：对字符串执行匹配搜索，并将匹配的结果作为数组返回。如果正则表达式中包含全局标志（g），则返回所有匹配项的数组；如果不包含全局标志，则返回一个数组，其中第一个元素是匹配的字符串，后面的元素是匹配的捕获组。
• 示例：

  let str = 'hello 123 world';
  let regex1 = /\d+/;
  let regex2 = /\d+/g;
  console.log(str.match(regex1)); // ['123', index: 6, input: 'hello 123 world', groups: undefined]
  console.log(str.match(regex2)); // ['123']

2. matchAll(regexp)

• 描述：返回一个包含所有匹配项的迭代器。每次迭代返回一个数组，数组的第一个元素是匹配的字符串，后面的元素是匹配的捕获组。正则表达式必须包含全局标志（g）。
• 示例：

  let str = 'hello 123 world 456';
  let regex = /\d+/g;
  let matches = str.matchAll(regex);
  for (let match of matches) {
      console.log(match);
  }
  // ['123', index: 6, input: 'hello 123 world 456', groups: undefined]
  // ['456', index: 18, input: 'hello 123 world 456', groups: undefined]

3. replace(searchValue, replaceValue)

• 描述：在字符串中查找匹配项，然后使用新的子字符串替换匹配项。searchValue 可以是正则表达式，如果使用正则表达式，可以实现更复杂的匹配和替换逻辑，如使用捕获组等。
• 示例：

  let str = 'hello 123 world';
  let regex = /(\d+)/;
  let newStr = str.replace(regex, 'abc');
  console.log(newStr); // 'hello abc world'
  let newStr2 = str.replace(regex, '$1-$1');
  console.log(newStr2); // 'hello 123-123 world'

4. search(regexp)

• 描述：执行匹配搜索，返回匹配项的索引。如果没有找到匹配项，则返回 -1。与 match 方法不同，search 方法不返回匹配的字符串，只返回索引。
• 示例：

  let str = 'hello 123 world';
  let regex = /\d+/;
  console.log(str.search(regex)); // 6

5. split(separator, limit)

• 描述：根据指定的分隔符将字符串分割成数组。separator 可以是正则表达式，使用正则表达式可以实现更复杂的分割逻辑，如根据多个条件分割等。
• 示例：

  let str = 'hello 123,world 456';
  let regex = /[\s,]+/;
  let arr = str.split(regex);
  console.log(arr); // ['hello', '123', 'world', '456']

  这些方法结合正则表达式使用，可以极大地增强字符串操作的灵活性和功能，能够满足各种复杂的字符串处理需求。