来自 前端技术 2019-09-04 19:43 的文章
当前位置: 六合联盟网 > 前端技术 > 正文

JavaScript字符串的绵密搜罗

当我刚开始编写JavaScript时候,遇到一些要处理的问题时我发现自己经常要谷歌搜索,或使用Mozilla的参考,以找到这些确切的语法和参 ​​数的定义与字符串操作的方法。好像高手都是这样过来的,

length

几年编程下来,我积累了大量的有用信息,所以今天的这篇文章就分享几年以来总结的一些最常见和最有用的字符串相关的方法的例子和简要说明。便于程序员用于快速参考。当然,最有经验的开发人员对这些操作很熟悉,但我认为这是一个很好的方法帮助初学者理解这些函数,他可以帮助你使用简单的语法。完成复杂的操作,

length 属性可返回字符串中的字符数目。

转换字符串

length 是根据字符串的UTF-16编码来获取长度的,空字符串长度为0。length 不可修改。

你可以转换一个数字,布尔值,或一个字符串的对象:

charAt()

 

charAt() 方法可返回指定位置的字符。注意,JavaScript 并没有一种有别于字符串类型的字符数据类型,所以返回的字符是长度为 1 的字符串。

1 var myNumber = 24; // 24

stringObject.charAt(index)

2 var myString = myNumber.toString(); // "24"var myNumber = 24; // 24

参数index是必需的。表示字符串中某个位置的数字,即字符在字符串中的下标。字符串中第一个字符的下标是 0。如果参数 index 不在 0 与 string.length 之间,该方法将返回一个空字符串。

var myString = String(myNumber); // "24" 

注意:charAt() 方法对于一些非 BMP(Basic-Multilingual-Plane) 字符支持会有问题,参考:MDN

 

charCodeAt()

 

charCodeAt() 方法可返回指定位置的字符的 Unicode 编码。这个返回值是 0 – 65535 之间的整数。
方法 charCodeAt() 与 charAt() 方法执行的操作相似,只不过前者返回的是位于指定位置的字符的编码,而后者返回的是字符子串。

 

stringObject.charCodeAt(index)

将字符串分割成多个子字符串

参数index是可选的。表示字符串中某个位置的数字,即字符在字符串中的下标。字符串中第一个字符的下标是 0。如果 index 是负数,或大于等于字符串的长度,则 charCodeAt() 返回 NaN。index为空时默认为0。

 

Unicode 编码的范围是 0 到 1,114,111。前128个Unicode 编码和ASCII字符编码匹配。charCodeAt() 方法返回的值总是小于65536,因为更高值的字符会成对出现,需要用charCodeAt(i)和charCodeAt(i+1)同时检索。

 

concat() –不推荐使用

为了区分一个字符串转换为一个子字符串数组,你可以使用的split()方法:

concat() 方法用于连接两个或多个字符串。

 

stringObject.concat(stringX, stringX, …, stringX)

 

参数stringX是必需的。是将被连接为一个字符串的一个或多个字符串对象。

 

concat() 方法将把它的所有参数转换成字符串,然后按顺序连接到字符串 stringObject 的尾部,并返回连接后的字符串。请注意,stringObject 本身并没有被更改。

1 var myString = "coming,apart,at,the,commas";

注意,强烈建议使用 ” + ” 运算符来进行字符串的连接,来替代这个方法,效率也更高,参考:concat vs + vs join。
indexOf()

2 var substringArray = myString.split(","); // ["coming", "apart", "at", "the", "commas"]

indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。

3 var arrayLimited = myString.split(",", 3); // ["coming", "apart", "at"] 

stringObject.indexOf(searchvalue, fromindex)

 

参数searchvalue是必需的,规定需检索的字符串值。参数fromindex是可选的整数参数。规定在字符串中开始检索的位置。它的合法取值是 0 到 stringObject.length – 1。如省略该参数,则将从字符串的首字符开始检索。

最后一行的第二个参数限制了数组参数所指定的项目的数量。

该方法将从头到尾地检索字符串 stringObject,看它是否含有子串 searchvalue。开始检索的位置在字符串的 fromindex 处或字符串的开头(没有指定 fromindex 时)。如果找到一个 searchvalue,则返回 searchvalue 的第一次出现的位置。stringObject 中的字符位置是从 0 开始的。

 

注意:indexOf() 方法对大小写敏感!如果要检索的字符串值没有出现,则该方法返回 -1。

 

lastIndexOf()

 

lastIndexOf() 方法可返回一个指定的字符串值最后出现的位置,在一个字符串中的指定位置从后向前搜索。

获取一个字符串的长度

lastIndexOf() 和 indexOf() 参数和使用方法一致,只不过是从后向前搜索。

 

复制代码 代码如下:

 

var str="Hello world world!"

要找出多少个字符长的字符串的length属性:

console.log(str.indexOf("wo"));        //6
console.log(str.indexOf("wo",2));      //6
console.log(str.indexOf("wo",10));     //12
console.log(str.lastIndexOf("wo"));    //12
console.log(str.lastIndexOf("wo",2));  //-1
console.log(str.lastIndexOf("wo",10)); //6

 

localeCompare()

1 var myString = "You're quite a character.";

用本地特定的顺序来比较两个字符串。

2 var stringLength = myString.length; // 25 

stringObject.localeCompare(target)

 

参数target是必需的,要以本地特定的顺序与 stringObject 进行比较的字符串。

 

返回比较结果的数字。如果 stringObject 小于 target,则 localeCompare() 返回小于 0 的数。如果 stringObject 大于 target,则该方法返回大于 0 的数。如果两个字符串相等,或根据本地排序规则没有区别,该方法返回 0。

 

把 < 和 > 运算符应用到字符串时,它们只用字符的 Unicode 编码比较字符串,而不考虑当地的排序规则。以这种方法生成的顺序不一定是正确的。例如,在西班牙语中,其中字符 “ch” 通常作为出现在字母 “c” 和 “d” 之间的字符来排序。localeCompare() 方法提供的比较字符串的方法,考虑了默认的本地排序规则。

在字符串中找到一个子串

localeCompare()在某些高级浏览器中的参数还支持locales 和 options,参考下面的代码和 MDN:

 

复制代码 代码如下:

 

//不同文化的排序规则不同
console.log('ä'.localeCompare('z', 'de'));  //-1
console.log('ä'.localeCompare('z', 'sv'));  //1

这样做的方法有两种。

match()

 

match() 方法可在字符串内检索指定的值,或找到一个或多个正则表达式的匹配。

使用indexOf():

该方法类似 indexOf() 和 lastIndexOf(),但是它返回指定的值,而不是字符串的位置。

 

stringObject.match(regexp)

1 var stringOne = "Johnny Waldo Harrison Waldo";

参数regexp可以是字符串,也可以是正则表达式 RegExp 对象。

2 var wheresWaldo = stringOne.indexOf("Waldo"); // 7indexOf()方法从字符串的开头开始搜索的子串(通过)第一个参数,并返回第一次出现子字符串的开始位置。

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

 

如果 regexp 没有标志 g,那么 match() 方法就只能在 stringObject 中执行一次匹配。如果没有找到任何匹配的文本, match() 将返回 null。否则,它将返回一个数组,其中存放了与它找到的匹配文本有关的信息。该数组的第 0 个元素存放的是匹配文本,而其余的元素存放的是与正则表达式的子表达式匹配的文本。除了这些常规的数组元素之外,返回的数组还含有两个对象属性。index 属性声明的是匹配文本的起始字符在 stringObject 中的位置,input 属性声明的是对 stringObject 的引用。

使用lastIndexOf() :

如果 regexp 具有标志 g,则 match() 方法将执行全局检索,找到 stringObject 中的所有匹配子字符串。若没有找到任何匹配的子串,则返回 null。如果找到了一个或多个匹配子串,则返回一个数组。不过全局匹配返回的数组的内容与前者大不相同,它的数组元素中存放的是 stringObject 中所有的匹配子串,而且也没有 index 属性或 input 属性。

 

没有标志g,调用 stringObject.match(regexp) 和调用 regexp.exec(stringObject) 的结果相同。在全局检索模式下,match() 即不提供与子表达式匹配的文本的信息,也不声明每个匹配子串的位置。如果需要这些全局检索的信息,可以使用 RegExp.exec()。

1 var stringOne = "Johnny Waldo Harrison Waldo";

注意:如果需要知道一个字符串是否匹配一个正则表达式,使用 regexp.test(string);如果只想一次匹配,使用 regexp.exec(string) 代替 string.match(regexp)。

2 var wheresWaldo = stringOne.lastIndexOf("Waldo"); // 22lastIndexOf()方法是完全一样的,只不过它返回传递的子字符串中最后一次出现的起始位置。

复制代码 代码如下:

 

var str="Hello world!"
var str2="1 plus 2 equal 3"

在这两种方法中,如果没有找到子字符串,则返回值-1,并允许一个可选的第二个参数表示您要开始搜索的字符在字符串中的位置

console.log(str.match("world"));  //["world", index: 6, input: "Hello world!"]
console.log(str2.match(/d+/g));  //["1", "2", "3"]

 

replace()

 

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

 

stringObject.replace(regexp/substr, replacement)

替换掉一个子串

参数regexp/substr是必需的。规定子字符串或要替换的模式的 RegExp 对象。如果该值是一个字符串,则将它作为要检索的直接量文本模式,而不是首先被转换为 RegExp 对象。参数replacement是必需的。是一个字符串值。规定了替换文本或生成替换文本的函数。

 

方法会返回一个新的字符串,是用 replacement 替换了 regexp 的第一次匹配或所有匹配之后得到的。

 

字符串 stringObject 的 replace() 方法执行的是查找并替换的操作。它将在 stringObject 中查找与 regexp 相匹配的子字符串,然后用 replacement 来替换这些子串。如果 regexp 具有全局标志 g,那么 replace() 方法将替换所有匹配的子串。否则,它只替换第一个匹配子串。

要更换一个新的字符串的字符串的一部分或全部,你可以使用replace():

replacement 可以是字符串,也可以是函数。如果它是字符串,那么每个匹配都将由字符串替换。但是 replacement 中的 $ 字符具有特定的含义。如下所示,它说明从模式匹配得到的字符串将用于替换:

 

1.$$ – $
2.$` - 位于匹配子串左侧的文本。
3.$' - 位于匹配子串右侧的文本。
4.$& - 与 regexp 相匹配的子串。
5.$number - 与 regexp 中的第 number个子表达式相匹配的文本。

 

replacement 可以是函数,在这种情况下,每个匹配都调用该函数,它返回的字符串将作为替换文本使用。该函数的第一个参数是匹配模式的字符串。接下来的参数是与模式中的子表达式匹配的字符串,可以有 0 个或多个这样的参数。接下来的参数是一个整数,声明了匹配在 stringObject 中出现的位置。最后一个参数是 stringObject 本身。

 

复制代码 代码如下:

1 var slugger = "Josh Hamilton";

//替换一次
var str = "Hello Microsoft!";
console.log(str.replace(/Microsoft/, "Google"));  //Hello Google!
console.log(str);  //Hello Microsoft!

2 var betterSlugger = slugger.replace("h Hamilton", "e Bautista");

//替换多次
var str2 = "Hello Microsoft! and Microsoft! and Microsoft! or Microsoft!";
console.log(str2.replace(/Microsoft/g, "Google"));  //Hello Google! and Google! and Google! or Google!

3 console.log(betterSlugger); // "Jose Bautista" 

//字符转换
var str3 = "Doe, John";
console.log(str3.replace(/(w+)s*, s*(w+)/, "$2 $1"));  //John Doe

 

var str4 = '"a", "b"';
console.log(str4.replace(/"([^"]*)"/g, "'$1'"));  //'a', 'b'

 第一个参数是你要替换的子字符串,第二个参数是新的子串。这只会替换匹配的子字符串的第一个实例。

//使用函数
var str5 = 'aaa bbb ccc';
console.log(str5.replace(/bw+b/g, function(word){
  return word.substring(0,1).toUpperCase()+word.substring(1);}
));   //Aaa Bbb Ccc

 

search()

 要更换匹配的子字符串的所有实例,使用正则表达式的全局标志:

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

 

stringObject.search(regexp)

1 var myString = "She sells automotive shells on the automotive shore";

参数regexp可以是需要在 stringObject 中检索的子串,也可以是需要检索的 RegExp 对象。

2 var newString = myString.replace(/automotive/g, "sea");

返回stringObject 中第一个与 regexp 相匹配的子串的起始位置。如果没有找到任何匹配的子串,则返回 -1。

3 console.log(newString); // "She sells sea shells on the sea shore"第二个参数可以包括特殊的替换模式,或可以是一个函数。

注意:search() 方法不执行全局匹配,它将忽略标志 g。它同时忽略 regexp 的 lastIndex 属性,并且总是从字符串的开始进行检索,这意味着它总是返回 stringObject 的第一个匹配的位置。

 

复制代码 代码如下:

 

var str = "Hello Microsoft!";
console.log(str.search(/Microsoft/));   //6

 

如果只是想知道是否有匹配的字符串,使用search()和使用test()方法差不多。如果想得到更多的信息,可以使用match()和exec()方法,但是效率会低。

在给定的位置,找到相应的字符

slice()

 

slice() 方法可提取字符串的某个部分,并以新的字符串返回被提取的部分。

 

stringObject.slice(start, end)

要查找的字符是在指定的位置,你可以使用charAt()方法:

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

 

参数end是紧接着要抽取的片段的结尾的下标。若未指定此参数,则要提取的子串包括 start 到原字符串结尾的字符串。如果该参数是负数,那么它规定的是从字符串的尾部开始算起的位置。

var myString = "Birds of a Feather";

方法会返回一个新的字符串。包括字符串 stringObject 从 start 开始(包括 start)到 end 结束(不包括 end)为止的所有字符。

var whatsAtSeven = myString.charAt(7); // "f"往往是在JavaScript的情况下,引用该字符串中的第一个位置为“0”,而不是“1”。

注意:String 对象的方法 slice()、substring() 和 substr() 都可返回字符串的指定部分。强烈建议在所有场合都使用 slice() 方法。

 

复制代码 代码如下:

 或者,您也可以使用charCodeAt() ,它给你,而不是字符本身的字符代码:

var str = "Hello Microsoft!";
console.log(str.slice(6));      //Microsoft!
console.log(str.slice(6, 12));  //Micros

 

substring()

1 var myString = "Birds of a Feather";

不推荐使用,建议使用slice()替代。

2 var whatsAtSeven = myString.charCodeAt(7); // "102"

substr()

3 var whatsAtEleven = myString.charCodeAt(11); // "70"请注意,大写字母“F”的位(11)的字符代码与小写字母“f”的位(7)从字符码不同。

不推荐使用,建议使用slice()替代。

 

toLocaleLowerCase()

 

不推荐使用,只在土耳其语等少数语种中有用,建议使用toLowerCase()替代。

 

toLocaleUpperCase()

连接多个字符串

不推荐使用,只在土耳其语等少数语种中有用,建议使用toUpperCase()替代。

 

toLowerCase()

 

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

在大多数情况下,当您连接字符串时,你会使用加法运算符(+)。但你也可以选择使用CONCAT()方法:

toUpperCase()

 

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

1 var stringOne = "Knibb High football ";

 

2 var stringTwo = stringOne.concat("rules."); // "Knibb High football rules"您还可以通过将多个字符串,将被一个个的追加起来(在它们出现的顺序):

String对象还有很多用于HTML 标签的方法:anchor()、big()、blink()、bold()、fixed()、fontcolor()、fontsize()、italics()、link()、small()、strike()、sub()、sup()。他们主要是对String对象进行HTML格式化处理,现在已经很少有人会应用到了,不推荐使用。

 

方法演示实例:

1 var stringOne = "Knibb ";

复制代码 代码如下:

2 var stringTwo = "High ";

<html>
<body>

3 var stringThree = "football ";

<script type="text/javascript">

4 var stringFour = "rules.";

var txt="Hello World!"

5 var finalString = stringOne.concat(stringTwo, stringThree, stringFour);

document.write("<p>Big: " + txt.big() + "</p>")
document.write("<p>Small: " + txt.small() + "</p>")

6 console.log(finalString); // "Knibb high football rules." 

document.write("<p>Bold: " + txt.bold() + "</p>")
document.write("<p>Italic: " + txt.italics() + "</p>")

 

document.write("<p>Blink: " + txt.blink() + " (does not work in IE)</p>")
document.write("<p>Fixed: " + txt.fixed() + "</p>")
document.write("<p>Strike: " + txt.strike() + "</p>")

 

document.write("<p>Fontcolor: " + txt.fontcolor("Red") + "</p>")
document.write("<p>Fontsize: " + txt.fontsize(16) + "</p>")

 

document.write("<p>Lowercase: " + txt.toLowerCase() + "</p>")
document.write("<p>Uppercase: " + txt.toUpperCase() + "</p>")

提取字符串(组成新字符串)

document.write("<p>Subscript: " + txt.sub() + "</p>")
document.write("<p>Superscript: " + txt.sup() + "</p>")

 

document.write("<p>Link: " + txt.link("") + "</p>")
</script>

 

</body>
</html>

有三种不同的方法来创建一个新的字符串值:

您可能感兴趣的文章:

  • 浅谈JavaScript中的String对象常用方法
  • javascript中String对象的slice()方法分析
  • 为Javascript中的String对象添加去除左右空格的方法(示例代码)
  • js String对象中常用方法小结(字符串操作)
  • Javascript String对象扩展HTML编码和解码的方法
  • 在Javascript中为String对象添加trim,ltrim,rtrim方法
  • JavaScript中String对象的方法介绍

 

使用slice()方法:

 

1 var stringOne = "abcdefghijklmnopqrstuvwxyz";

2 var stringTwo = stringOne.slice(5, 10); // "fghij"

使用substring()方法:

 

 

 

var stringOne = "abcdefghijklmnopqrstuvwxyz";

var stringTwo = stringOne.substring(5, 10); // "fghij" 

 

 

 

对于这两个slice()和substring()方法的第一个参数是你想要的开始的子串,第二个参数(这是可选的)后的字符串中的字符结束的字串。因此,在上面的例子中,参数“5,10”,是指,字符5到9,以创建一个新的字符串。

 

使用SUBSTR()

 

var stringOne = "abcdefghijklmnopqrstuvwxyz";

var stringTwo = stringOne.substr(5, 10); // "fghijklmno"SUBSTR() ,第一个参数代表开始新的字符串的字符,第二个参数是可选的。但这个时候,第二个参数表示的字符的总数应包括的开始的字符“5”的位置。

 

 

 

一个字符串转换为大写或小写

 

 

有四种方法做大小写转换。有两个字符串转换为全部大写:

 

1 var stringOne = "Speak up, I can't hear you.";

2 var stringTwo = stringOne.toLocaleUpperCase(); // "SPEAK UP, I CAN'T HEAR YOU"

3 var stringThree = stringOne.toUpperCase(); // "SPEAK UP, I CAN'T HEAR YOU"将字符串转换为小写:

 

1 var stringOne = "YOU DON'T HAVE TO YELL";

2 var stringTwo = stringOne.toLocaleLowerCase(); // "you don't have to yell"

3 var stringThree = stringOne.toLowerCase(); // "you don't have to yell" 

 

模式匹配

 

 

在一个字符串匹配的模式,可以使用两种方法,其基本的工作方式相同。

 

 

 

一个字符串match()方法被调用,并通过正则表达式:

 

1 var myString = "How much wood could a wood chuck chuck";

2 var myPattern = /.ood/;

3 var myResult = myString.match(myPattern); // ["wood"]

4 var patternLocation = myResult.index; // 9

5 var originalString = myResult.input // "How much wood could a wood chuck chuck" 

 

 

 

exec()方法被调用的一个正则表达式对象,并通过字符串:

 

var myString = "How much wood could a wood chuck chuck";

var myPattern = /.huck/;

var myResult = myPattern.exec(myString); // ["chuck"]

var patternLocation = myResult.index; // 27

var originalString = myResult.input // "How much wood could a wood chuck chuck" 

 

 对于这两种方法,只在第一个匹配发生被返回。如果没有找到匹配,将返回空值。

 

 

 

也可以使用search()方法,它接受一个正则表达式作为唯一的参数,并返回模式第一次出现的位置:

 

1 var myString = "Assume";

2 var patternLocation = myString.search(/ume/); // 3如果没有找到匹配,则该方法返回“-1”。

 

 

 

比较两个字符串的排序顺序

 

 

您可以比较两个字符串,看看哪一个字母先靠前使用localeCompare,,有三个可能的返回值:

 

1 var myString = "chicken";

2 var myStringTwo = "egg";

3 var whichCameFirst = myString.localeCompare(myStringTwo); // -1 (except Chrome, which returns -2)

4 whichCameFirst = myString.localeCompare("chicken"); // 0

5 whichCameFirst = myString.localeCompare("apple"); // 1 (Chrome returns 2)stringObject.localeCompare(target)//公式如上图所示,如果 stringObject 小于 target,则 localeCompare() 返回小于 0 的数。如果 stringObject 大于 target,则该方法返回大于 0 的数。如果两个字符串相等,或根据本地排序规则没有区别,该方法返回 0。

 

由于浏览器可以返回任何负数或正数之前和之后的结果最好使用 if ( result < 0 ) ,而不是if ( result === -1 ),后者将无法在Chrome浏览器中运行。

 

数的...

本文由六合联盟网发布于前端技术,转载请注明出处:JavaScript字符串的绵密搜罗

关键词: