搜尋
首頁web前端js教程實例介紹javaScript操作字串的一些常用方法

本篇文章為大家帶來了關於javascript的相關知識,主要介紹了javaScript操作字串的一些常用方法,文中透過範例程式碼介紹的非常詳細,具有一定的參考價值,下面一起來看一下,希望對大家有幫助。

實例介紹javaScript操作字串的一些常用方法

【相關推薦:javascript影片教學web前端

1. 取得字串長度

JavaScript中的字串有一個length屬性,該屬性可以用來取得字串的長度

const str = 'hello';
str.length   // 输出结果:5

2. 取得字串指定位置的值

charAt()和charCodeAt()方法都可以透過索引來取得指定位置的值:

  • charAt() 方法取得到的是指定位置的字符;
  • charCodeAt()方法取得的是指定位置字元的Unicode值。

(1)charAt()

charAt() 方法可以傳回指定位置的字元。其語法如下:

string.charAt(index)

index表示字元在字串中的索引值:

const str = 'hello';
str.charAt(1)  // 输出结果:e

字串也可以透過索引值來直接取得對應字符,那它和charAt()有什麼差異呢

const str = 'hello';
str.charAt(1)  // 输出结果:e 
str[1]         // 输出结果:e 
str.charAt(5)  // 输出结果:'' 
str[5]         // 输出结果:undefined

可以看到,當index的取值不在str的長度範圍內時,str[index]會傳回undefined,而charAt(index)會傳回空字串;除此之外, str[index]不相容於ie6-ie8,charAt(index)可以相容。

(2)charCodeAt()

charCodeAt():此方法會傳回指定索引位置字元的Unicode 值,傳回值為0 - 65535 之間的整數,表示給定索引處的UTF-16 代碼單元,如果指定位置沒有字符,將返回 NaN

let str = "abcdefg";
console.log(str.charCodeAt(1)); // "b" --> 98

透過這個方法,可以取得字串中指定Unicode編碼值範圍的字元。例如,數字0~9的Unicode編碼範圍是: 48~57,可以用這個方法來篩選字串中的數字,當然如果你比較熟悉正規表示式,會比較方便。

3. 檢索字串是否包含特定序列

這5個方法都可以用來檢索一個字串中是否包含特定的序列。其中前兩個方法得到的指定元素的索引值,並且只會傳回第一次符合的值的位置。後三個方法傳回的是布林值,表示是否符合指定的值。

注意:這5個方法都對大小寫敏感!

(1)indexOf()

indexOf():找出某個字符,有則傳回第一次符合的位置,否則傳回-1,其語法如下:

string.indexOf(searchvalue,fromindex)

此方法有兩個參數:

  • searchvalue:必需,規定需檢索的字串值;
  • fromindex:可選的整數參數,規定在字串中開始檢索的位置。它的合法取值是 0 到 string.length - 1。如省略該,則從字串的首字開始檢索。
let str = "abcdefgabc";
console.log(str.indexOf("a"));   // 输出结果:0
console.log(str.indexOf("z"));   // 输出结果:-1
console.log(str.indexOf("c", 4)) // 输出结果:9

(2)lastIndexOf()

lastIndexOf():找出某個字符,有則傳回最後一次符合的位置,否則回傳- 1

let str = "abcabc";
console.log(str.lastIndexOf("a"));  // 输出结果:3
console.log(str.lastIndexOf("z"));  // 输出结果:-1

此方法和indexOf()類似,只是查找的順序不一樣,indexOf()是正序查找,lastIndexOf()是逆序查找。

(3)includes()

includes():此方法用來判斷字串是否包含指定的子字串。如果找到符合的字串則傳回 true,否則傳回 false。此方法的語法如下:

string.includes(searchvalue, start)

此方法有兩個參數:

  • searchvalue:必需,要尋找的字串;
  • start:可選,設定從那個位置開始查找,預設為0。
let str = 'Hello world!';

str.includes('o')  // 输出结果:true
str.includes('z')  // 输出结果:false
str.includes('e', 2)  // 输出结果:false

(4)startsWith()

#startsWith():該方法用於偵測字串是否以指定的子字串開始。如果是以指定的子字串開頭傳回 true,否則 false。其語法和上面的includes()方法一樣。

let str = 'Hello world!';

str.startsWith('Hello') // 输出结果:true
str.startsWith('Helle') // 输出结果:false
str.startsWith('wo', 6) // 输出结果:true

(5)endsWith()

endsWith():方法用來判斷目前字串是否是以指定的子字串結尾。如果傳入的子字串在搜尋字串的末尾則傳回 true,否則將傳回 false。其語法如下:

string.endsWith(searchvalue, length)

此方法有兩個參數:

  • searchvalue:必需,要搜尋的子字串;
  • length: 設定字串的長度,預設值為原始字串長度string.length。
let str = 'Hello world!';

str.endsWith('!')       // 输出结果:true
str.endsWith('llo')     // 输出结果:false
str.endsWith('llo', 5)  // 输出结果:true

可以看到,當第二個參數設定為5時,就會從字串的前5個字元中進行檢索,所以會傳回true。

4. 連接多個字串

concat() 方法用於連接兩個或多個字串。此方法不會改變原有字串,會傳回連接兩個或多個字串的新字串。其語法如下:

string.concat(string1, string2, ..., stringX)

其中参数 string1, string2, ..., stringX 是必须的,他们将被连接为一个字符串的一个或多个字符串对象。

let str = "abc";
console.log(str.concat("efg"));          //输出结果:"abcefg"
console.log(str.concat("efg","hijk")); //输出结果:"abcefghijk"

虽然concat()方法是专门用来拼接字符串的,但是在开发中使用最多的还是加操作符+,因为其更加简单。

5. 字符串分割成数组

split() 方法用于把一个字符串分割成字符串数组。该方法不会改变原始字符串。其语法如下:

string.split(separator,limit)

该方法有两个参数:

  • separator:必需。字符串或正则表达式,从该参数指定的地方分割 string。
  • limit:可选。该参数可指定返回的数组的最大长度。如果设置了该参数,返回的子串不会多于这个参数指定的数组。如果没有设置该参数,整个字符串都会被分割,不考虑它的长度。
let str = "abcdef";
str.split("c");    // 输出结果:["ab", "def"]
str.split("", 4)   // 输出结果:['a', 'b', 'c', 'd']

如果把空字符串用作 separator,那么字符串中的每个字符之间都会被分割。

str.split("");     // 输出结果:["a", "b", "c", "d", "e", "f"]

其实在将字符串分割成数组时,可以同时拆分多个分割符,使用正则表达式即可实现:

const list = "apples,bananas;cherries"
const fruits = list.split(/[,;]/)
console.log(fruits);  // 输出结果:["apples", "bananas", "cherries"]

6. 截取字符串

substr()、substring()和 slice() 方法都可以用来截取字符串。

(1) slice()

slice() 方法用于提取字符串的某个部分,并以新的字符串返回被提取的部分。其语法如下:

string.slice(start,end)

该方法有两个参数:

  • start:必须。 要截取的片断的起始下标,第一个字符位置为 0。如果为负数,则从尾部开始截取。
  • end:可选。 要截取的片段结尾的下标。若未指定此参数,则要提取的子串包括 start 到原字符串结尾的字符串。如果该参数是负数,那么它规定的是从字符串的尾部开始算起的位置。

上面说了,如果start是负数,则该参数规定的是从字符串的尾部开始算起的位置。也就是说,-1 指字符串的最后一个字符,-2 指倒数第二个字符,以此类推:

let str = "abcdefg";
str.slice(1,6);   // 输出结果:"bcdef" 
str.slice(1);     // 输出结果:"bcdefg" 
str.slice();      // 输出结果:"abcdefg" 
str.slice(-2);    // 输出结果:"fg"
str.slice(6, 1);  // 输出结果:""

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

(2) substr()

substr() 方法用于在字符串中抽取从开始下标开始的指定数目的字符。其语法如下:

string.substr(start,length)

该方法有两个参数:

  • start 必需。要抽取的子串的起始下标。必须是数值。如果是负数,那么该参数声明从字符串的尾部开始算起的位置。也就是说,-1 指字符串中最后一个字符,-2 指倒数第二个字符,以此类推。
  • length:可选。子串中的字符数。必须是数值。如果省略了该参数,那么返回从 stringObject 的开始位置到结尾的字串。
let str = "abcdefg";
str.substr(1,6); // 输出结果:"bcdefg" 
str.substr(1);   // 输出结果:"bcdefg" 相当于截取[1,str.length-1]
str.substr();    // 输出结果:"abcdefg" 相当于截取[0,str.length-1]
str.substr(-1);  // 输出结果:"g"

(3) substring()

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

string.substring(from, to)

该方法有两个参数:

  • from:必需。一个非负的整数,规定要提取的子串的第一个字符在 string 中的位置。
  • to:可选。一个非负的整数,比要提取的子串的最后一个字符在 string 中的位置多 1。如果省略该参数,那么返回的子串会一直到字符串的结尾。

注意: 如果参数 from 和 to 相等,那么该方法返回的就是一个空串(即长度为 0 的字符串)。如果 from 比 to 大,那么该方法在提取子串之前会先交换这两个参数。并且该方法不接受负的参数,如果参数是个负数,就会返回这个字符串。

let str = "abcdefg";
str.substring(1,6); // 输出结果:"bcdef" [1,6)
str.substring(1);   // 输出结果:"bcdefg" [1,str.length-1]
str.substring();    // 输出结果:"abcdefg" [0,str.length-1]
str.substring(6,1); // 输出结果 "bcdef" [1,6)
str.substring(-1);  // 输出结果:"abcdefg"

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

7. 字符串大小写转换

toLowerCase() 和 toUpperCase()方法可以用于字符串的大小写转换。

(1)toLowerCase()

toLowerCase():该方法用于把字符串转换为小写。

let str = "adABDndj";
str.toLowerCase(); // 输出结果:"adabdndj"

(2)toUpperCase()

toUpperCase():该方法用于把字符串转换为大写。

let str = "adABDndj";
str.toUpperCase(); // 输出结果:"ADABDNDJ"

我们可以用这个方法来将字符串中第一个字母变成大写:

let word = 'apple'
word = word[0].toUpperCase() + word.substr(1)
console.log(word) // 输出结果:"Apple"

8. 字符串模式匹配

replace()、match()和search()方法可以用来匹配或者替换字符。

(1)replace()

replace():该方法用于在字符串中用一些字符替换另一些字符,或替换一个与正则表达式匹配的子串。其语法如下:

string.replace(searchvalue, newvalue)

该方法有两个参数:

  • searchvalue:必需。规定子字符串或要替换的模式的 RegExp 对象。如果该值是一个字符串,则将它作为要检索的直接量文本模式,而不是首先被转换为 RegExp 对象。
  • newvalue:必需。一个字符串值。规定了替换文本或生成替换文本的函数。
let str = "abcdef";
str.replace("c", "z") // 输出结果:abzdef

执行一个全局替换, 忽略大小写:

let str="Mr Blue has a blue house and a blue car";
str.replace(/blue/gi, "red");    // 输出结果:'Mr red has a red house and a red car'

注意: 如果 regexp 具有全局标志 g,那么 replace() 方法将替换所有匹配的子串。否则,它只替换第一个匹配子串。

(2)match()

match():该方法用于在字符串内检索指定的值,或找到一个或多个正则表达式的匹配。该方法类似 indexOf() 和 lastIndexOf(),但是它返回指定的值,而不是字符串的位置。其语法如下:

string.match(regexp)

该方法的参数 regexp 是必需的,规定要匹配的模式的 RegExp 对象。如果该参数不是 RegExp 对象,则需要首先把它传递给 RegExp 构造函数,将其转换为 RegExp 对象。

注意: 该方法返回存放匹配结果的数组。该数组的内容依赖于 regexp 是否具有全局标志 g。

let str = "abcdef";
console.log(str.match("c")) // ["c", index: 2, input: "abcdef", groups: undefined]

search()方法用于检索字符串中指定的子字符串,或检索与正则表达式相匹配的子字符串。其语法如下:

string.search(searchvalue)

该方法的参数 regex 可以是需要在 string 中检索的子串,也可以是需要检索的 RegExp 对象。

注意: 要执行忽略大小写的检索,请追加标志 i。该方法不执行全局匹配,它将忽略标志 g,也就是只会返回第一次匹配成功的结果。如果没有找到任何匹配的子串,则返回 -1。

返回值: 返回 str 中第一个与 regexp 相匹配的子串的起始位置。

let str = "abcdef";
str.search(/bcd/)   // 输出结果:1

9. 移除字符串收尾空白符

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

(1)trim()

trim() 方法用于移除字符串首尾空白符,该方法不会改变原始字符串:

let str = "  abcdef  "
str.trim()    // 输出结果:"abcdef"

注意,该方法不适用于null、undefined、Number类型。

(2)trimStart()

trimStart() 方法的的行为与trim()一致,不过会返回一个从原始字符串的开头删除了空白的新字符串,不会修改原始字符串:

const s = '  abc  ';

s.trimStart()   // "abc  "

(3)trimEnd()

trimEnd() 方法的的行为与trim()一致,不过会返回一个从原始字符串的结尾删除了空白的新字符串,不会修改原始字符串:

const s = '  abc  ';

s.trimEnd()   // "  abc"

10. 获取字符串本身

valueOf()和toString()方法都会返回字符串本身的值,感觉用处不大。

(1)valueOf()

valueOf():返回某个字符串对象的原始值,该方法通常由 JavaScript 自动进行调用,而不是显式地处于代码中。

let str = "abcdef"
console.log(str.valueOf()) // "abcdef"

(2)toString()

toString():返回字符串对象本身

let str = "abcdef"
console.log(str.toString()) // "abcdef"

11. 重复一个字符串

repeat() 方法返回一个新字符串,表示将原字符串重复n次:

'x'.repeat(3)     // 输出结果:"xxx"
'hello'.repeat(2) // 输出结果:"hellohello"
'na'.repeat(0)    // 输出结果:""

如果参数是小数,会向下取整:

'na'.repeat(2.9) // 输出结果:"nana"

如果参数是负数或者Infinity,会报错:

'na'.repeat(Infinity)   // RangeError
'na'.repeat(-1)         // RangeError

如果参数是 0 到-1 之间的小数,则等同于 0,这是因为会先进行取整运算。0 到-1 之间的小数,取整以后等于-0,repeat视同为 0。

'na'.repeat(-0.9)   // 输出结果:""

如果参数是NaN,就等同于 0:

'na'.repeat(NaN)    // 输出结果:""

如果repeat的参数是字符串,则会先转换成数字。

'na'.repeat('na')   // 输出结果:""
'na'.repeat('3')    // 输出结果:"nanana"

12. 补齐字符串长度

padStart()和padEnd()方法用于补齐字符串的长度。如果某个字符串不够指定长度,会在头部或尾部补全。

(1)padStart()

padStart()用于头部补全。该方法有两个参数,其中第一个参数是一个数字,表示字符串补齐之后的长度;第二个参数是用来补全的字符串。

如果原字符串的长度,等于或大于指定的最小长度,则返回原字符串:

'x'.padStart(1, 'ab') // 'x'

如果用来补全的字符串与原字符串,两者的长度之和超过了指定的最小长度,则会截去超出位数的补全字符串:

'x'.padStart(5, 'ab') // 'ababx'
'x'.padStart(4, 'ab') // 'abax'

如果省略第二个参数,默认使用空格补全长度:

'x'.padStart(4) // '   x'

padStart()的常见用途是为数值补全指定位数,笔者最近做的一个需求就是将返回的页数补齐为三位,比如第1页就显示为001,就可以使用该方法来操作:

"1".padStart(3, '0')   // 输出结果: '001'
"15".padStart(3, '0')  // 输出结果: '015'

(2)padEnd()

padEnd()用于尾部补全。该方法也是接收两个参数,第一个参数是字符串补全生效的最大长度,第二个参数是用来补全的字符串:

'x'.padEnd(5, 'ab') // 'xabab'
'x'.padEnd(4, 'ab') // 'xaba'

13. 字符串转为数字

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

(1)parseInt()

parseInt() 方法用于可解析一个字符串,并返回一个整数。其语法如下:

parseInt(string, radix)

该方法有两个参数:

  • string:必需。要被解析的字符串。
  • radix:可选。表示要解析的数字的基数。该值介于 2 ~ 36 之间。

当参数 radix 的值为 0,或没有设置该参数时,parseInt() 会根据 string 来判断数字的基数。

parseInt("10");			  // 输出结果:10
parseInt("17",8);		  // 输出结果:15 (8+7)
parseInt("010");		  // 输出结果:10 或 8

当参数 radix 的值以 “0x” 或 “0X” 开头,将以 16 为基数:

parseInt("0x10")      // 输出结果:16

如果该参数小于 2 或者大于 36,则 parseInt() 将返回 NaN:

parseInt("50", 1)      // 输出结果:NaN
parseInt("50", 40)     // 输出结果:NaN

只有字符串中的第一个数字会被返回,当遇到第一个不是数字的字符为止:

parseInt("40 4years")   // 输出结果:40

如果字符串的第一个字符不能被转换为数字,就会返回 NaN:

parseInt("new100")     // 输出结果:NaN

字符串开头和结尾的空格是允许的:

parseInt("  60  ")    // 输出结果: 60

(2)parseFloat()

parseFloat() 方法可解析一个字符串,并返回一个浮点数。该方法指定字符串中的首个字符是否是数字。如果是,则对字符串进行解析,直到到达数字的末端为止,然后以数字返回该数字,而不是作为字符串。其语法如下:

parseFloat(string)

parseFloat 将它的字符串参数解析成为浮点数并返回。如果在解析过程中遇到了正负号(+ 或 -)、数字 (0-9)、小数点,或者科学记数法中的指数(e 或 E)以外的字符,则它会忽略该字符以及之后的所有字符,返回当前已经解析到的浮点数。同时参数字符串首位的空白符会被忽略。

parseFloat("10.00")      // 输出结果:10.00
parseFloat("10.01")      // 输出结果:10.01
parseFloat("-10.01")     // 输出结果:-10.01
parseFloat("40.5 years") // 输出结果:40.5

如果参数字符串的第一个字符不能被解析成为数字,则 parseFloat 返回 NaN。

parseFloat("new40.5")    // 输出结果:NaN

14.如何多次复制一个字符串

JS 字符串允许简单的重复,与纯手工复制字符串不同,我们可以使用字符串的repeat方法。

const laughing = '小智'.repeat(3)
consol.log(laughing) // "小智小智小智"

const eightBits = '1'.repeat(8)
console.log(eightBits) // "11111111"

15. 如何填充一个字符串到指定的长度

有时,我们希望字符串具有特定长度。 如果字符串太短,则需要填充剩余空间,直到达到指定的长度为止。

过去,主要还是使用库 left-pad。 但是,今天我们可以使用padStartSpadEnd方法,选择哪种方法取决于是在字符串的开头还是结尾填充字符串。

// 在开头添加 "0",直到字符串的长度为 8。
const eightBits = '001'.padStart(8, '0')
console.log(eightBits) // "00000001"

//在末尾添加“ *”,直到字符串的长度为5。
const anonymizedCode = "34".padEnd(5, "*")
console.log(anonymizedCode) // "34***"

16.如何将字符串拆分为字符数组

有多种方法可以将字符串分割成字符数组,我更喜欢使用扩展操作符(...):

const word = 'apple'
const characters = [...word]
console.log(characters) // ["a", "p", "p", "l", "e"]

注意,这并不总是像预期的那样工作。有关更多信息,请参见下一个技巧。

17.如何计算字符串中的字符

可以使用length属性。

const word = "apple";
console.log(word.length) // 5

但对于中文来说,这个方法就不太靠谱。

const word = "?"
console.log(word.length) // 2

日本汉字?返回length2,为什么? JS 将大多数字符表示为16位代码点。 但是,某些字符表示为两个(或更多)16 位代码点,称为代理对。 如果使用的是length属性,JS 告诉你使用了多少代码点。 因此,?(hokke)由两个代码点组成,返回错误的值。

那怎么去判断呢,使用解构操作符号(...)

const word = "?"
const characters = [...word]
console.log(characters.length) // 1

这种方法在大多数情况下都有效,但是有一些极端情况。 例如,如果使用表情符号,则有时此长度也是错误的。 如果真想计算字符正确长度,则必须将单词分解为 字素簇(Grapheme Clusters) ,这超出了本文的范围,这里就不在这说明。

18.如何反转字符串中的字符

反转字符串中的字符是很容易的。只需组合扩展操作符(...)、Array.reverse方法和Array.join方法。

const word = "apple"
const reversedWord = [...word].reverse().join("")
console.log(reversedWord) // "elppa"

和前面一样,也有一些边缘情况。遇到边缘的情况就有需要首先将单词拆分为字素簇

19. 如何将字符串中的第一个字母大写

一个非常常见的操作是将字符串的第一个字母大写。虽然许多编程语言都有一种本地方法来实现这一点,但 JS 需要做一些工作。

let word = 'apply'

word = word[0].toUpperCase() + word.substr(1)

console.log(word) // "Apple"

另一种方法:

// This shows an alternative way
let word = "apple";

// 使用扩展运算符(`...`)拆分为字符

const characters = [...word];
characters[0] = characters[0].toUpperCase();
word = characters.join("");

console.log(word); // "Apple"

20.如何在多个分隔符上分割字符串

假设我们要在分隔符上分割字符串,第一想到的就是使用split方法,这点,智米们肯定知道。 但是,有一点大家可能不知道,就是split可以同时拆分多个分隔符, 使用正则表达式就可以实现:

// 用逗号(,)和分号(;)分开。

const list = "apples,bananas;cherries"
const fruits = list.split(/[,;]/)
console.log(fruits); // ["apples", "bananas", "cherries"]

21.如何检查字符串是否包含特定序列

字符串搜索是一项常见的任务。 在 JS 中,你可以使用String.includes方法轻松完成此操作。 不需要正则表达式。

const text = "Hello, world! My name is Kai!"
console.log(text.includes("Kai")); // true

22.如何检查字符串是否以特定序列开头或结尾

在字符串的开头或结尾进行搜索,可以使用String.startsWithString.endsWith方法。

const text = "Hello, world! My name is Kai!"

console.log(text.startsWith("Hello")); // true

console.log(text.endsWith("world")); // false

23.如何替换所有出现的字符串

有多种方法可以替换所有出现的字符串。 可以使用String.replace方法和带有全局标志的正则表达式。 或者,可以使用新的String.replaceAll方法。 请注意,并非在所有浏览器和Node.js 版本中都可用此新方法。

const text = "I like apples. You like apples."

console.log(text.replace(/apples/g, "bananas"));
// "I like bananas. You like bananas."

console.log(text.replaceAll("apples", "bananas"));
// "I lik

24. JSON格式化和解析

JSON 不是仅限 JavaScript 的数据类型,并且广泛用于前后端数据交互。JSON.stringify() 函数用于将对象转换为 JSON 格式的字符串。通常,只需将对象作为参数即可,如下所示:

const article = {
    title: "JavaScript 字符串技巧",
    view: 30000,
    comments: null,
    content: undefined,
};
const strArticle = JSON.stringify(article); 

console.log(strArticle); // {"title":"JavaScript 字符串技巧","view":30000,"comments":null}

从上面的代码可以看到,在 stringify 中会过滤掉 undefined 的值,但 null 值不会。

JSON.stringify() 可以接受两个可选参数,第二个参数是一个替换器,可以在其中指定要打印的键的数组或清除它们的函数。如下代码:

console.log(JSON.stringify(article, ["title", "comments"])); // {"title":"JavaScript 字符串技巧","comments":null}
console.log(JSON.stringify(article, [])); // {}

对于一个巨大的 JSON,传递一个长数组可能影响可读性及效率。因此,可以设置替换函数并为要跳过的键返回 undefined ,如下代码:

const result = JSON.stringify(article, (key, value) =>
    key === "title" ? undefined : value
);
console.log(result); // {"view":30000,"comments":null}

JSON.stringify() 的第三个参数通过指定缩进(在嵌套块中很有用)来格式化 JSON,可以传递一个数字来设置缩进间距,甚至可以传递一个字符串来替换空格。如下代码:

console.log(JSON.stringify(article, ["title"], "\t"));

输出的格式如下:

{
    "title": "JavaScript 字符串技巧"
}

还有一个 JSON.parse() 函数,它接受一个 JSON 字符串并将其转换为一个 JavaScript 对象。它还接受一个 reviver 函数,可以在返回值之前拦截对象属性并修改属性值。

const reviver = (key, value) => (key === "view" ? 0 : value);

var jsonString = JSON.stringify(article);
var jsonObj = JSON.parse(jsonString, reviver);

console.log(jsonObj); // { title: 'JavaScript 字符串技巧', view: 0, comments: null }

25. 多行字符串和嵌入式表达式

在 JavaScript 中有三种创建字符串的方式,可以使用单引号 '' 、双引号 "" 或反引号(键盘的左上方, 1 的左边按键)。

const countries1 = "China";
const countries2 = "China";
const countries3 = `China`;

前两种创建方式基本相同,并且可以混合和匹配以连接或添加带引号的字符串(通过使用相反的语法风格),而反引号可以对字符串进行花哨而强大的操作。

反引号也称为模板字面量,反引号在创建多行字符串和嵌入表达式时很方便。下面是如何在 JavaScript 中使用字符串插值创建多行字符串的代码:

const year = "2021";
const month = 7;
const day = 2;
const detail = `今天是${year}年${month}月${day}日,
是个不错的日子!`;

console.log(detail);

输出的结果也换行了,如下:

今天是2021年7月2日,
是个不错的日子!

除了字符串字面量,在 ${} 中允许任何有效的表达式,它可以是一个函数调用或表达式,甚至是一个嵌套模板。

标记模板是模板字面量的一种高级形式,它允许使用一个函数来解析模板字面量,其中内嵌的表达式是参数。如下代码:

const title = "JavaScript 字符串技巧";
const view = 30000;

const detail = (text, titleExp, viewExp) => {
    const [string1, string2, string3] = [...text];
    return `${string1}${titleExp}${string2}${viewExp}${string3}`;
};

const intro = detail`本文的标题是《${title}》,当前阅读量是: ${view}`;

console.log(intro); // 文的标题是《JavaScript 字符串技巧》,当前阅读量是:30000

26. 验证字符串数组中是否存在子字符串

查找 JavaScript 字符串中是否存在子字符串时间容易的事情,在 ES6 中,只需要使用 includes 函数。

但需要验证字符串是否存于数据中,主要数组中其中一项包含就返回 true ,如果都不包含返回 false,因此需要使用 some 函数与includes 一起使用,如下代码:

const arrayTitles = ["Javascript", "EScript", "Golang"];
const hasText = (array, findText) =>
    array.some((item) => item.includes(findText));

console.log(hasText(arrayTitles, "script")); // true
console.log(hasText(arrayTitles, "php")); // false

【相关推荐:javascript视频教程web前端

以上是實例介紹javaScript操作字串的一些常用方法的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述
本文轉載於:CSDN。如有侵權,請聯絡admin@php.cn刪除
Python vs. JavaScript:學習曲線和易用性Python vs. JavaScript:學習曲線和易用性Apr 16, 2025 am 12:12 AM

Python更適合初學者,學習曲線平緩,語法簡潔;JavaScript適合前端開發,學習曲線較陡,語法靈活。 1.Python語法直觀,適用於數據科學和後端開發。 2.JavaScript靈活,廣泛用於前端和服務器端編程。

Python vs. JavaScript:社區,圖書館和資源Python vs. JavaScript:社區,圖書館和資源Apr 15, 2025 am 12:16 AM

Python和JavaScript在社區、庫和資源方面的對比各有優劣。 1)Python社區友好,適合初學者,但前端開發資源不如JavaScript豐富。 2)Python在數據科學和機器學習庫方面強大,JavaScript則在前端開發庫和框架上更勝一籌。 3)兩者的學習資源都豐富,但Python適合從官方文檔開始,JavaScript則以MDNWebDocs為佳。選擇應基於項目需求和個人興趣。

從C/C到JavaScript:所有工作方式從C/C到JavaScript:所有工作方式Apr 14, 2025 am 12:05 AM

從C/C 轉向JavaScript需要適應動態類型、垃圾回收和異步編程等特點。 1)C/C 是靜態類型語言,需手動管理內存,而JavaScript是動態類型,垃圾回收自動處理。 2)C/C 需編譯成機器碼,JavaScript則為解釋型語言。 3)JavaScript引入閉包、原型鍊和Promise等概念,增強了靈活性和異步編程能力。

JavaScript引擎:比較實施JavaScript引擎:比較實施Apr 13, 2025 am 12:05 AM

不同JavaScript引擎在解析和執行JavaScript代碼時,效果會有所不同,因為每個引擎的實現原理和優化策略各有差異。 1.詞法分析:將源碼轉換為詞法單元。 2.語法分析:生成抽象語法樹。 3.優化和編譯:通過JIT編譯器生成機器碼。 4.執行:運行機器碼。 V8引擎通過即時編譯和隱藏類優化,SpiderMonkey使用類型推斷系統,導致在相同代碼上的性能表現不同。

超越瀏覽器:現實世界中的JavaScript超越瀏覽器:現實世界中的JavaScriptApr 12, 2025 am 12:06 AM

JavaScript在現實世界中的應用包括服務器端編程、移動應用開發和物聯網控制:1.通過Node.js實現服務器端編程,適用於高並發請求處理。 2.通過ReactNative進行移動應用開發,支持跨平台部署。 3.通過Johnny-Five庫用於物聯網設備控制,適用於硬件交互。

使用Next.js(後端集成)構建多租戶SaaS應用程序使用Next.js(後端集成)構建多租戶SaaS應用程序Apr 11, 2025 am 08:23 AM

我使用您的日常技術工具構建了功能性的多租戶SaaS應用程序(一個Edtech應用程序),您可以做同樣的事情。 首先,什麼是多租戶SaaS應用程序? 多租戶SaaS應用程序可讓您從唱歌中為多個客戶提供服務

如何使用Next.js(前端集成)構建多租戶SaaS應用程序如何使用Next.js(前端集成)構建多租戶SaaS應用程序Apr 11, 2025 am 08:22 AM

本文展示了與許可證確保的後端的前端集成,並使用Next.js構建功能性Edtech SaaS應用程序。 前端獲取用戶權限以控制UI的可見性並確保API要求遵守角色庫

JavaScript:探索網絡語言的多功能性JavaScript:探索網絡語言的多功能性Apr 11, 2025 am 12:01 AM

JavaScript是現代Web開發的核心語言,因其多樣性和靈活性而廣泛應用。 1)前端開發:通過DOM操作和現代框架(如React、Vue.js、Angular)構建動態網頁和單頁面應用。 2)服務器端開發:Node.js利用非阻塞I/O模型處理高並發和實時應用。 3)移動和桌面應用開發:通過ReactNative和Electron實現跨平台開發,提高開發效率。

See all articles

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

AI Hentai Generator

AI Hentai Generator

免費產生 AI 無盡。

熱門文章

R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
4 週前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳圖形設置
4 週前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.如果您聽不到任何人,如何修復音頻
4 週前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.聊天命令以及如何使用它們
4 週前By尊渡假赌尊渡假赌尊渡假赌

熱工具

VSCode Windows 64位元 下載

VSCode Windows 64位元 下載

微軟推出的免費、功能強大的一款IDE編輯器

DVWA

DVWA

Damn Vulnerable Web App (DVWA) 是一個PHP/MySQL的Web應用程序,非常容易受到攻擊。它的主要目標是成為安全專業人員在合法環境中測試自己的技能和工具的輔助工具,幫助Web開發人員更好地理解保護網路應用程式的過程,並幫助教師/學生在課堂環境中教授/學習Web應用程式安全性。 DVWA的目標是透過簡單直接的介面練習一些最常見的Web漏洞,難度各不相同。請注意,該軟體中

SublimeText3 Linux新版

SublimeText3 Linux新版

SublimeText3 Linux最新版

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

MantisBT

MantisBT

Mantis是一個易於部署的基於Web的缺陷追蹤工具,用於幫助產品缺陷追蹤。它需要PHP、MySQL和一個Web伺服器。請查看我們的演示和託管服務。