JavaScript 字符串 & MooTools Native Extensions之Strings篇

JavaScript String(字符串对象)

字符串是JavaScript的一种基本数据类型。

String类提供了操作原始字符串值的方法。

String对象的length属性声明了该字符串中的字符数。

类String定义了大量操作字符串的方法， 例如从字符串中提取字符或子串，或者检索字符或子串。

注意，JavaScript的字符串是不可变(immutable)的，String类定义的方法都不能改变字符串的内容。

像String.toUpperCase()这样的方法，返回的是全新的字符串，而不是修改原始字符串。

在JavaScript 1.2及其后版本的Netscape实现中，字符串的行为就像只读的字符数组。

例如，从字符串s中提取第三个字符，可以用s[2]代替更加标准的s.charAt(2)。

此外，对字符串应用for/in循环时，它将枚举字符串中每个字符的数组下标(但要注意，ECMAScript标准规定，不能枚举length属性)。

因为Netscape实现中的字符 串的数组行为不标准，所以应该避免使用它。

String 对象的方法

FF: Firefox, N: Netscape, IE: Internet Explorer

String 对象的属性

FF: Firefox, N: Netscape, IE: Internet Explorer

String 对象的常用方法介绍

String 对象是 String 原始类型的对象表示法，它是以下方式创建的：

1

var oStringObject = new String("hello world");

不过在日常的应用过程中,等效的方法是我们直接创建字符串。

1

var s ="hello world";

String 对象的 valueOf() 方法和 toString() 方法都会返回 String 类型的原始值：

1

alert(oStringObject.valueOf() == oStringObject.toString());	//输出 "true"

如果运行这段代码，输出是 “true”，说明这些值真的相等。

注释：String 对象是 ECMAScript 中比较复杂的引用类型之一。同样，本节的重点只是 String 类的基本功能。

length 属性

String 对象具有属性 length，它是字符串中的字符个数：

1
2

var oStringObject = new String("hello world"); 
alert(oStringObject.length);	//输出 "11"

这个例子输出的是 “11”，即 “hello world” 中的字符个数。注意，即使字符串包含双字节的字符（与 ASCII 字符相对，ASCII 字符只占用一个字节），每个字符也只算一个字符。

charAt() 和 charCodeAt() 方法

String 对象还拥有大量的方法。

首先，两个方法 charAt() 和 charCodeAt() 访问的是字符串中的单个字符。这两个方法都有一个参数，即要操作的字符的位置。

charAt() 方法返回的是包含指定位置处的字符的字符串：

1
2

var oStringObject = new String("hello world"); 
alert(oStringObject.charAt(1));	//输出 "e"

在字符串 “hello world” 中，位置 1 处的字符是 “e”。在“ECMAScript 原始类型”这一节中我们讲过，第一个字符的位置是 0，第二个字符的位置是 1，依此类推。因此，调用 charAt(1) 返回的是 “e”。

如果想得到的不是字符，而是字符代码，那么可以调用 charCodeAt() 方法：

1
2

var oStringObject = new String("hello world");  
alert(oStringObject.charCodeAt(1));	//输出 "101"

这个例子输出 “101”，即小写字母 “e” 的字符代码。

concat() 方法

接下来是 concat() 方法，用于把一个或多个字符串连接到 String 对象的原始值上。

该方法返回的是 String 原始值，保持原始的 String 对象不变：

1
2
3
4

var oStringObject = new String("hello ");  
var sResult = oStringObject.concat("world"," test demo ","rainbow"); //可以连接一个或多个字符串
alert(sResult);		//输出 "hello world test demo rainbow"  
alert(oStringObject);	//输出 "hello "

在上面这段代码中，调用 concat() 方法返回的是 “hello world test demo rainbow”，而 String 对象存放的仍然是 “hello “。

出于这种原因，较常见的是用加号（+）连接字符串，因为这种形式从逻辑上表明了真正的行为：

1
2
3
4

var oStringObject = new String("hello ");  
var sResult = oStringObject + "world";  
alert(sResult);		//输出 "hello world"  
alert(oStringObject);	//输出 "hello "

indexOf() 和 lastIndexOf() 方法

迄今为止，已讨论过连接字符串的方法，访问字符串中的单个字符的方法。

不过如果无法确定在某个字符串中是否确实存在一个字符，应该调用什么方法呢？

这时，可调用 indexOf() 和 lastIndexOf() 方法。

indexOf() 和 lastIndexOf() 方法返回的都是指定的子串在另一个字符串中的位置，如果没有找不到子串，则返回 -1。

这两个方法的不同之处在于，indexOf() 方法是从字符串的开头（位置 0）开始检索字符串，而 lastIndexOf() 方法则是从字符串的结尾开始检索子串。例如：

1
2
3

var oStringObject = new String("hello world!");  
alert(oStringObject.indexOf("o"));		输出 "4" 
alert(oStringObject.lastIndexOf("o"));	输出 "7"

在这里，第一个 “o” 字符串出现在位置 4，即 “hello” 中的 “o”；最后一个 “o” 出现在位置 7，即 “world” 中的 “o”。如果该字符串中只有一个 “o” 字符串，那么 indexOf() 和 lastIndexOf() 方法返回的位置相同。

localeCompare() 方法

下一个方法是 localeCompare()，对字符串进行排序。

该方法有一个参数 – 要进行比较的字符串，返回的是下列三个值之一：

• 如果 String 对象按照字母顺序排在参数中的字符串之前，返回负数。
• 如果 String 对象等于参数中的字符串，返回 0
• 如果 String 对象按照字母顺序排在参数中的字符串之后，返回正数。

注释：如果返回负数，那么最常见的是 -1，不过真正返回的是由实现决定的。

如果返回正数，那么同样的，最常见的是 1，不过真正返回的是由实现决定的。

示例如下：

1
2
3
4

var oStringObject = new String("yellow");  
alert(oStringObject.localeCompare("brick"));		//输出 "1"  
alert(oStringObject.localeCompare("yellow"));		//输出 "0"  
alert(oStringObject.localeCompare("zoo"));		//输出 "-1"

在这段代码中，字符串 “yellow” 与 3 个值进行了对比，即 “brick”、”yellow” 和 “zoo”。

由于按照字母顺序排列，”yellow” 位于 “brick” 之后，所以 localeCompare() 返回 1；

“yellow” 等于 “yellow”，所以 localeCompare() 返回 0；

“zoo” 位于 “yellow” 之后，localeCompare() 返回 -1。

再强调一次，由于返回的值是由实现决定的，所以最好以下面的方式调用 localeCompare() 方法：

1
2
3
4
5
6
7
8
9
10
11

var oStringObject1 = new String("yellow");  
var oStringObject2 = new String("brick");    
var iResult = sTestString.localeCompare("brick");   
 
if(iResult < 0) {   
   alert(oStringObject1 + " comes before " + oStringObject2);  
}else if (iResult > 0) {   
   alert(oStringObject1 + " comes after " + oStringObject2); 
}else { 
   alert("The two strings are equal");  
}

采用这种结构，可以确保这段代码在所有实现中都能正确运行。

localeCompare() 方法的独特之处在于，实现所处的区域（locale，兼指国家/地区和语言）确切说明了这种方法运行的方式。

在美国，英语是 ECMAScript 实现的标准语言，localeCompare() 是区分大小写的，大写字母在字母顺序上排在小写字母之后。

不过，在其他区域，情况可能并非如此。

slice() 和 substring()

ECMAScript 提供了两种方法从子串创建字符串值，即 slice() 和 substring()。

这两种方法返回的都是要处理的字符串的子串，都接受一个或两个参数。

第一个参数是要获取的子串的起始位置，第二个参数（如果使用的话）是要获取子串终止前的位置（也就是说，获取终止位置处的字符不包括在返回的值内）。

如果省略第二个参数，终止位就默认为字符串的长度。

与 concat() 方法一样，slice() 和 substring() 方法都不改变 String 对象自身的值。

它们只返回原始的 String 值，保持 String 对象不变。

1
2
3
4
5

var oStringObject = new String("hello world");  
alert(oStringObject.slice(3));		//输出 "lo world"  
alert(oStringObject.substring(3));		//输出 "lo world"  
alert(oStringObject.slice(3, 7));		//输出 "lo w"  
alert(oStringObject.substring(3, 7));	//输出 "lo w"

在这个例子中，slice() 和 substring() 的用法相同，返回值也一样。

当只有参数 3 时，两个方法返回的都是 “lo world”，因为 “hello” 中的第二个 “l” 位于位置 3 上。

当有两个参数 “3” 和 “7” 时，两个方法返回的值都是 “lo w”（”world” 中的字母 “o” 位于位置 7 上，所以它不包括在结果中）。

为什么有两个功能完全相同的方法呢？事实上，这两个方法并不完全相同，不过只在参数为负数时，它们处理参数的方式才稍有不同。

对于负数参数，slice() 方法的两个参数是允许都为负数的，但是substring()方法的第一参数必须是一个非负的整数。

重点强调的是，slice() 方法会用字符串的长度加上参数，substring() 方法则将其作为 0 处理（也就是说将忽略它）。

例如：

1
2
3
4
5

var oStringObject = new String("hello world");  
alert(oStringObject.slice(-3));		//输出 "rld"  
alert(oStringObject.substring(-3));	//输出 "hello world"  
alert(oStringObject.slice(3, -4));		//输出 "lo w"  
alert(oStringObject.substring(3, -4));	//输出 "hel"

这样即可看出 slice() 和 substring() 方法的主要不同。

当只有参数 -3 时，slice() 返回 “rld”，substring() 则返回 “hello world”。这是因为对于字符串 “hello world”，slice(“-3”) 将被转换成 slice(“8”)，而 substring(“-3”) 将被转换成 substring(“0”)。

同样，使用参数 3 和 -4 时，差别也很明显。slice() 将被转换成 slice(3, 7)，与前面的例子相同，返回 “lo w”。而 substring() 方法则将两个参数解释为 substring(3, 0)，实际上即 substring(0, 3)，因为 substring() 总把较小的数字作为起始位，较大的数字作为终止位。因此，substring(“3, -4”) 返回的是 “hel”。这里的最后一行代码用来说明如何使用这些方法。

toLowerCase()、toLocaleLowerCase()、toUpperCase() 和 toLocaleUpperCase()

最后一套要讨论的方法涉及大小写转换。有 4 种方法用于执行大小写转换，即 ：

• toLowerCase()
• toLocaleLowerCase()
• toUpperCase()
• toLocaleUpperCase()

从名字上可以看出它们的用途，前两种方法用于把字符串转换成全小写的，后两种方法用于把字符串转换成全大写的。

toLowerCase() 和 toUpperCase() 方法是原始的，是以 java.lang.String 中相同方法为原型实现的。

toLocaleLowerCase() 和 toLocaleUpperCase() 方法是基于特定的区域实现的（与 localeCompare() 方法相同）。

在许多区域中，区域特定的方法都与通用的方法完全相同。

不过，有几种语言对 Unicode 大小写转换应用了特定的规则（例如土耳其语），因此必须使用区域特定的方法才能进行正确的转换。

1
2
3
4
5

var oStringObject = new String("Hello World");  
alert(oStringObject.toLocaleUpperCase());	//输出 "HELLO WORLD"  
alert(oStringObject.toUpperCase());		//输出 "HELLO WORLD"  
alert(oStringObject.toLocaleLowerCase());	//输出 "hello world"  
alert(oStringObject.toLowerCase());		//输出 "hello world"

这段代码中，toUpperCase() 和 toLocaleUpperCase() 输出的都是 “HELLO WORLD”，toLowerCase() 和 toLocaleLowerCase() 输出的都是 “hello world”。

一般来说，如果不知道在以哪种编码运行一种语言，则使用区域特定的方法比较安全。

提示：记住，String 对象的所有属性和方法都可应用于 String 原始值上，因为它们是伪对象。

instanceof 运算符

在使用 typeof 运算符时采用引用类型存储值会出现一个问题，无论引用的是什么类型的对象，它都返回 “object”。ECMAScript 引入了另一个 Java 运算符 instanceof 来解决这个问题。

instanceof 运算符与 typeof 运算符相似，用于识别正在处理的对象的类型。

与 typeof 方法不同的是，instanceof 方法要求开发者明确地确认对象为某特定类型。

例如：

1
2

var oStringObject = new String("hello world");  
alert(oStringObject instanceof String);	//输出 "true"

这段代码问的是“变量 oStringObject 是否为 String 对象的实例？”oStringObject 的确是 String 对象的实例，因此结果是 “true”。尽管不像 typeof 方法那样灵活，但是在 typeof 方法返回 “object” 的情况下，instanceof 方法还是很有用的。

MooTools 对String的扩展

花了那么多时间说了JavaScript String对象有关的方法和属性。接下来让我们来看一看MooTools给我们提供的额外的一些处理字符串的函数。

对于上面使用正则表达式处理字符串的函数（String.match(),String.replace()等），RegExp（正则表达式对象）和MooTools中提供的正则表达式处理函数，我在这里就不太多讲了。我们会作为一个专题来学习的，因为正则表达式是一个复杂的东西。

String大概是使用频率最高的数据类型了，在各个javascript框架中，都或多或少的对String进行了扩展，来提供一些十分方便的方法来处理日常应用。mootools也不例外，String.js中主要实现了这些对String的扩展，还稍微带了点对Array和Number的扩展。

Strings 在 MooTools 中扩展的一些方法可以分成两个基本阵营：

introspection（自省，自我测试 和 manipulation操纵）（其中大部分是在后者） ：

Introspection （自省，自我测试）

String.contains

检查在传入的 string 是否包含在字符串中。它检查一个字符串去看它是否包含一个你要查找的字符串，如果找到了要查找的字符串就返回true，如果没有找到就返回false。 您也可以通过在第二个参数，来查看字符串是否包含在分隔的值的列表中。他很大的区别在于 String.test能使用正则表达式,String.contains不使用正则表达式。 第二个参数也是显著的，因为它基本上对字符串执行一个 String.Split 。

作用：

检测字符串内是否包含参数所给出的字符串.

如果给出了separator(分隔符)这个参数, 则匹配时将把主字符串看作按分割符切分的一个列表, 然后将需要检测的字符串和这些列表项进行比较

语法：

1

myString.contains(string[, separator]);

返回值：

• (boolean) 如果目标字符串在本字符串内, 则返回true
• (boolean) 如果目标字符串在本字符串内不存在, 则返回false

Example:

1
2
3

'a bc'.contains('bc');      //返回 true
'a b c'.contains('c', ' '); //返回 true
'a bc'.contains('b', ' ');  //返回 false

String.test

This method checks to see whether a string passes a regular
expression; it returns true or false. You can pass a second argument for
RegExp options. Alternatively, you can pass in a RegExp object.

它的简单在于，一个正则表达式可以是一个你想要匹配的简单字符串。尽管JavaScript本身已经为RegExp对象提供了它自己的test()方法，MooTools的test()方法更好用一些，在JavaScript中使用正则表达式也更轻松一些。

作用：

使用正则表达式对字符串进行匹配测试.

语法：

1

myString.test(regex[,params]);

参数：

• regex – (mixed) 要匹配的字符串或正则表达式
• params – (string, 可选) 如果第一个参数regex是一个字符串, 则本参数可为任何正则表达式参数(注意, 参数’g’无效)

返回值：

• (boolean) 匹配成功, 返回true
• (boolean) 匹配失败, 返回false

Example:

1
2
3

"I like cookies".test("cookie");        //返回 true
"I like cookies".test("COOKIE", "i");   //返回 true ('i'是正则表达式参数，表示忽略大小写.注意'g'在这里无效)
"I like cookies".test("cake");          //返回 false

注意：从技术上讲，你可以传递多个参数给test()方法，但是由于JavaScript现在仅仅只支持3个正则表达式参数（“g”、“i”和“m”，分别用于指定全局匹配、区分大小写的匹配和多行匹配。其中2个在test()方法中默认启用），这个期间内你可能仅仅只能使用参数“i”。

Manipulation

String.trim

trim函数提供了一个简单直接的方式来去掉任何你想处理的字符串两端的空白字符，也包括换行符 \n 和 制表符 \t

作用：

清除字符串两端的空白字符串

语法：

1

myString.trim();

返回值：

(string) 清理后的字符串

Example：

1

"    \ti like cookies\n     ".trim(); //返回 "i like cookies"

String.clean

有的时候trim()并不能满足我们需求，也许有的时候我们想去掉一个字符串里的所有空白符。幸运的是，对于那些你觉得坚强的和你无心加入的空白字符，MooTools慷慨地为你提供了clean()方法。

作用：

清除整个字符串中多余的空白字符串

语法;

1

myString.clean();

返回值;

(string) 清理后的字符串

Example：

1

"           i      like  \n \t     cookies      \n\n".clean(); //返回 "i like cookies

注意：clean()方法与trim()方法有一点很大的不同。它把你传入的字符里面的空格全部提取出来，而不只是头部和尾部的空白字符。它们意味着字符串中的任何多于一个的空白字符和任何换行符和制表符（tab）。

String.camelCase

Converts a hyphenated string into a mixed case string; mostly used by MooTools for setting and getting css properties.

作用;

将以连字符分隔的字符串转换成以大小写形式进行分隔的字符串

语法：

1

myString.camelCase();

返回值;

(string) 以大小写形式进行分隔的字符串

Example:

1

"I-like-cookies".camelCase(); //返回 "ILikeCookies"

String.hyphenate

Converts a CamelCase string to a hyphenated one; mostly used by MooTools for setting and getting css properties.

作用;

将以大小写形式进行分隔的字符串转换成以字符分隔的字符串

语法：

myString.hyphenate();

返回值;

(string) 以连接字符号分隔的字符串

Example:

1

"ILikeCookies".hyphenate(); //返回 "I-like-cookies"

String.capitalize

作用;

将字符串中每个单词的首字母大写

语法：

1

myString.capitalize();

返回值;

(string) 转换后的字符串

Example:

1

"i like cookies".capitalize(); //返回 "I Like Cookies"

String.escapeRegExp

作用;

将字符串中对正则表达式敏感的字符进行转义

语法：

1

myString.escapeRegExp();

返回值;

(string) 转义后的字符串

Example:

1

'animals.sheep[1]'.escapeRegExp(); //返回 'animals\.sheep\[1\]'

String.toInt

把字符串转换成整数，如果非数字，则返回NaN

作用;

将字符串解析为一个数值, 并以给出的基准进制计算为一个十进制整数

语法：

1

myString.toInt([base]);

返回值;

• (number) 解析并计算后的数值
• (false) 如果字符串内容不是数值, 则返回NaN

Example:

1
2
3
4
5

"4em".toInt();  //返回 4
"10px".toInt(); //返回 10
"-10".toInt(); // value is -10
"px10".toInt(); // NaN
"10.1".toInt(); // returns 10

String.toFloat

把字符串转换成浮点数

作用;

将字符串解析为一个浮点数

语法：

1

myString.toFloat();

返回值;

• (number) 浮点数
• (false) 如果字符串内容不是数值, 则返回NaN

Example:

1
2
3
4
5
6

alert("4em".toFloat());  //返回 4
alert("10px".toFloat()); //返回 10
alert("-10".toFloat()); // value is -10
alert("px10".toFloat()); // NaN
alert("95.25%".toFloat()); //返回 95.25
alert("10.848".toFloat()); //返回 10.848

String.stripScripts

This method removes all the <script> tags from a string. If you pass in true as an argument, those scripts will also be evaluated.

作用;

Strips the String of its <script> tags and anything in between them.

语法：

1

myString.stripScripts([evaluate]);

返回值;

(string) – The String without the stripped scripts.

Example:

1
2
3

var myString = "<script>alert('Hello')</script>Hello, World.";
myString.stripScripts(); //Returns "Hello, World."
myString.stripScripts(true); //Alerts "Hello", then returns "Hello, World."

String.substitute

Substitutes keywords in a string using an object/array. Removes undefined keywords and ignores escaped keywords.

作用;

对字符串中给出的替换标记进行值替换(类似简单模板).

语法：

myString.substitute(object[, regexp]);

返回值;

(string) – 替换后的字符串

Example:

1
2
3
4
5
6
7
8
9

var myString = "{subject} is {property_1} and {property_2}.";
 
var myObject = {
    subject: 'Jack Bauer', 
    property_1: 'our lord', 
    property_2: 'savior'
};
 
myString.substitute(myObject); //结果: Jack Bauer is our lord and savior

注意：substitute()是一个非常强大的工具。substitute的更多强大的功能来自于它的正则表达式的使用，我们会在后面稍微讲一下。

Less commonly used （不常用的）

String.hexToRgb

将代表十六进制颜色代码的字符串转换成RGB格式的颜色代码.

作用;

将代表十六进制颜色代码的字符串转换成RGB格式的颜色代码.

字符串的颜色格式必须是如下格式的(可以不带前缀的#):’#ffffff’, #fff’, ‘ffffff’, 或 ‘fff’

语法：

1
2
3
4
5

myString.hexToRgb([array]);  
 
参数：
 
array - (<em>boolean</em>, 可选) 如果为true, 则输出为一个数组形式, 而不是通常的字符串形式

返回值;

• (string) RGB格式的颜色代码字符串
• (array) 如果设置了array为true, 则返回数组形式的RGB颜色代码

Example:

1
2
3

"#123".hexToRgb();          //返回 "rgb(17,34,51)"
"112233".hexToRgb();        //返回 "rgb(17,34,51)"
"#112233".hexToRgb(true);   //返回 [17,34,51]

String.rgbToHex

将代表RGB格式的颜色代码的字符串转换成十六进制颜色代码.

作用;

将代表RGB格式的颜色代码的字符串转换成十六进制颜色代码.

字符串的RGB颜色格式必须是如下格式:”rgb(255,255,255)”, 或 “rgba(255,255,255,1)”

语法：

myString.rgbToHex([array]);

参数：

array – (boolean, 可选) 如果为true, 则输出为一个数组形式(如： [‘ff’,’33’,’00’]), 而不是通常的字符串形式(如: “#ff3300”)

返回值;

• string) 十六进制的颜色代码字符串; 或者, 如果RGB代码设置了第四个值(alpha)为0, 则返回’transparent’

• (array) 如果设置了array为true, 则返回数组形式的十六进制颜色代码

Example:

1
2
3

"rgb(17,34,51)".rgbToHex();     //返回 "#112233"
"rgb(17,34,51)".rgbToHex(true); //返回 ['11','22','33']
"rgba(17,34,51,0)".rgbToHex();  //返回 "transparent"

知识联系

rgbToHex  和 hexToRgb 在 MooTools Arrays 中的扩展。

作用：取数组中的前3个元素，转化成RGB颜色代码或十六进制颜色代码

具体请看:MooTools Native Extensions之Arrays篇 »

toInt 和 toFloat 在 MooTools Numbers 中的扩展.

toInt

作用：数字类型的对象转换成整型

toFloat

作用：数字类型的对象转换承浮点型

具体请看:JavaScript(Number和Math)对象 & MooTools Native Extensions之Numbers篇 »