《JavaScript高级程序设计》（第4版）阅读笔记（三十）

这一篇继续分享《高程四》的第五章的内容。

 

9. 字符串迭代与解构
 

字符串的原型上暴露了一个 @@iterator 方法，表示可以迭代字符串的每个字符。可以像下面这样手动使用迭代器：

let message = "abc";
let stringIterator = message[Symbol.iterator]();
console.log(stringIterator.next()); // {value: "a", done: false}
console.log(stringIterator.next()); // {value: "b", done: false}
console.log(stringIterator.next()); // {value: "c", done: false}
console.log(stringIterator.next()); // {value: undefined, done: true}

在 for-of 循环中可以通过这个迭代器按序访问每个字符：
 

for (const c of "abcde") {
  console.log(c);
} 
// a
// b
// c
// d
// e

有了这个迭代器之后，字符串就可以通过解构操作符来解构了。比如，可以更方便地把字符串分割为字符数组：

let message = "abcde";
console.log([...message]); // ["a", "b", "c", "d", "e"]

 

10. 字符串大小写转换
 

下一组方法涉及大小写转换，包括4个方法： toLowerCase() 、toLocaleLowerCase() 、 toUpperCase() 和toLocaleUpperCase() 。 toLowerCase() 和toUpperCase() 方法是原来就有的方法，与 java.lang.String中的方法同名。 toLocaleLowerCase() 和toLocaleUpperCase() 方法旨在基于特定地区实现。在很多地区，地区特定的方法与通用的方法是一样的。但在少数语言中（如土耳其语），Unicode大小写转换需应用特殊规则，要使用地区特定的方法才能实现正确转换。下面是几个例子：

let stringValue = "hello world";
console.log(stringValue.toLocaleUpperCase()); // "HELLO WORLD"
console.log(stringValue.toUpperCase()); // "HELLO WORLD"
console.log(stringValue.toLocaleLowerCase()); // "hello world"
console.log(stringValue.toLowerCase()); // "hello world"

这里， toLowerCase() 和 toLocaleLowerCase() 都返回hello world ，而 toUpperCase() 和toLocaleUpperCase() 都返回 HELLO WORLD 。通常，如果不知道代码涉及什么语言，则最好使用地区特定的转换方法。

 

11. 字符串模式匹配方法

 

String 类型专门为在字符串中实现模式匹配设计了几个方法。第一个就是 match() 方法，这个方法本质上跟 RegExp 对象的 exec()方法相同。 match() 方法接收一个参数，可以是一个正则表达式字符串，也可以是一个 RegExp 对象。来看下面的例子：

let text = "cat, bat, sat, fat";
let pattern = /.at/;
// 等价于pattern.exec(text)
let matches = text.match(pattern);
console.log(matches.index); // 0
console.log(matches[0]); // "cat"
console.log(pattern.lastIndex); // 0

match() 方法返回的数组与 RegExp 对象的 exec() 方法返回的数组是一样的：第一个元素是与整个模式匹配的字符串，其余元素则是与表达式中的捕获组匹配的字符串（如果有的话）。

另一个查找模式的字符串方法是 search() 。这个方法唯一的参数与match() 方法一样：正则表达式字符串或 RegExp 对象。这个方法返回模式第一个匹配的位置索引，如果没找到则返回-1。 search()始终从字符串开头向后匹配模式。看下面的例子：

let text = "cat, bat, sat, fat";
let pos = text.search(/at/);
console.log(pos); // 1

这里， search(/at/) 返回 1 ，即 "at" 的第一个字符在字符串中的位置。

为简化子字符串替换操作，ECMAScript提供了 replace() 方法。这个方法接收两个参数，第一个参数可以是一个 RegExp 对象或一个字符串（这个字符串不会转换为正则表达式），第二个参数可以是一个字符串或一个函数。

如果第一个参数是字符串，那么只会替换第一个子字符串。要想替换所有子字符串，第一个参数必须为正则表达式并且带全局标记，如下面的例子所示：

let text = "cat, bat, sat, fat";
let result = text.replace("at", "ond");
console.log(result); // "cond, bat, sat, fat"
result = text.replace(/at/g, "ond");
console.log(result); // "cond, bond, sond, fond"

在这个例子中，字符串 "at" 先传给 replace() 函数，而替换文本是 "ond" 。结果是 "cat" 被修改为 "cond" ，而字符串的剩余部分保持不变。通过将第一个参数改为带全局标记的正则表达式，字符串中的所有 "at" 都被替换成了 "ond" 。

第二个参数是字符串的情况下，有几个特殊的字符序列，可以用来插入正则表达式操作的值。ECMA-262中规定了下表中的值。

字符序列	替换文本
$$	$
$&	匹配整个模式的子字符串。与 RegExp.lastMatch相同
$'	匹配的子字符串之后的字符串。与RegExp.rightContext 相同
$`	匹配的子字符串之前的字符串。与RegExp.leftContext 相同
$n	匹配第 n 个捕获组的字符串，其中 n 是0~9。比如， $1 是匹配第一个捕获组的字符串， $2 是匹配第二个捕获组的字符串，以此类推。如果没有捕获组，则值为空字符串
$nn	匹配第 nn 个捕获组字符串，其中 nn 是01~99。比如， $01 是匹配第一个捕获组的字符串， $02 是匹配第二个捕获组的字符串，以此类推。如果没有捕获组，则值为空字符串

使用这些特殊的序列，可以在替换文本中使用之前匹配的内容，如下面的例子所示：

let text = "cat, bat, sat, fat";
result = text.replace(/(.at)/g, "word ($1)");
console.log(result); // word (cat), word (bat), word (sat), word (fat)

这里，每个以 "at" 结尾的词都会被替换成 "word" 后跟一对小括号，其中包含捕获组匹配的内容 $1 。

replace() 的第二个参数可以是一个函数。在只有一个匹配项时，这个函数会收到3个参数：与整个模式匹配的字符串、匹配项在字符串中的开始位置，以及整个字符串。在有多个捕获组的情况下，每个匹配捕获组的字符串也会作为参数传给这个函数，但最后两个参数还是与整个模式匹配的开始位置和原始字符串。这个函数应该返回一个字符串，表示应该把匹配项替换成什么。使用函数作为第二个参数可以更细致地控制替换过程，如下所示：

function htmlEscape(text) {
  return text.replace(/[<>"&]/g, function(match,
    pos, originalText) {
      switch(match) {
        case "<":
          return "&lt;";
        case ">":
          return "&gt;";
        case "&":
          return "&amp;";
        case "\"":
          return "&quot;";
      }
   });
} 
console.log(htmlEscape("<p class=\"greeting\">Hello world!</p>"));
// "&lt;p class=&quot;greeting&quot;&gt;Helloworld!</p>"

这里，函数 htmlEscape() 用于将一段HTML中的4个字符替换成对应的实体：小于号、大于号、和号，还有双引号（都必须经过转义）。实现这个任务最简单的办法就是用一个正则表达式查找这些字符，然后定义一个函数，根据匹配的每个字符分别返回特定的HTML实体。

最后一个与模式匹配相关的字符串方法是 split() 。这个方法会根据传入的分隔符将字符串拆分成数组。作为分隔符的参数可以是字符串，也可以是 RegExp 对象。（字符串分隔符不会被这个方法当成正则表达式。）还可以传入第二个参数，即数组大小，确保返回的数组不会超过指定大小。来看下面的例子：

let colorText = "red,blue,green,yellow";
let colors1 = colorText.split(","); // ["red", "blue", "green", "yellow"]
let colors2 = colorText.split(",", 2); // ["red", "blue"]
let colors3 = colorText.split(/[^,]+/); // ["",",", ",", ",", ""]

在这里，字符串 colorText 是一个逗号分隔的颜色名称符串。调用split(",") 会得到包含这些颜色名的数组，基于逗号进行拆分。要把数组元素限制为2个，传入第二个参数2即可。最后，使用正则表达式可以得到一个包含逗号的数组。注意在最后一次调用 split() 时，返回的数组前后包含两个空字符串。这是因为正则表达式指定的分隔符出现在了字符串开头（ "red" ）和末尾（ "yellow" ）。（我对split方法的理解就是，在字符串的分隔符位置这里砍一刀，砍下的片段被放入数组。而被我砍的地方本身不会进入数组，这里的分隔符是“除了逗号以外的字符”，所以会在“red”、“blue”等地方砍下去。但是注意，如果砍了字符串头部和尾部，会多出来两个空串，我的理解是，这里多了一条缝。）

 

12. localeCompare() 方法

 

最后一个方法是 localeCompare() ，这个方法比较两个字符串，返回如下3个值中的一个。

如果按照字母表顺序，字符串应该排在字符串参数前头，则返回负值。（通常是 -1 ，具体还要看与实际值相关的实现。）

如果字符串与字符串参数相等，则返回 0 。

如果按照字母表顺序，字符串应该排在字符串参数后头，则返回正值。（通常是 1 ，具体还要看与实际值相关的实现。）

下面是一个例子：
 

let stringValue = "yellow";
console.log(stringValue.localeCompare("brick"));// 1
console.log(stringValue.localeCompare("yellow"));// 0
console.log(stringValue.localeCompare("zoo"));// -1

在这里，字符串 "yellow" 与3个不同的值进行了比较： "brick" 、 "yellow" 和 "zoo" 。 "brick" 按字母表顺序应该排在 "yellow" 前头，因此 localeCompare() 返回1。 "yellow" 等于 "yellow" ，因此 "localeCompare()" 返回0 。最后， "zoo" 在 "yellow" 后面，因此 localeCompare()返回 -1 。

强调一下，因为返回的具体值可能因具体实现而异，所以最好像下面的示例中一样使用 localeCompare() ：
 

function determineOrder(value) {
  let result = stringValue.localeCompare(value);
    if (result < 0) {
      console.log(`The string 'yellow' comes before the string '${value}'.`);
    } else if (result > 0) {
        console.log(`The string 'yellow' comes after the string '${value}'.`);
    } else {
        console.log(`The string 'yellow' is equal to the string '${value}'.`);
    }
} 
determineOrder("brick");
determineOrder("yellow");
determineOrder("zoo");

（我的理解是，我们能肯定的是，大于就一定是返回正值，小于就一定是返回负值，具体正几负几不知道没关系，反正它不重要）这样一来，就可以保证在所有实现中都能正确判断字符串的顺序了。localeCompare() 的独特之处在于，实现所在的地区（国家和语言）决定了这个方法如何比较字符串。在美国，英语是ECMAScript实现的标准语言， localeCompare() 区分大小写，大写字母排在小写字母前面。但其他地区未必是这种情况。

 

13. HTML方法
 

 

早期的浏览器开发商认为使用JavaScript动态生成HTML标签是一个需求。因此，早期浏览器扩展了规范，增加了辅助生成HTML标签的方法。下表总结了这些HTML方法。不过，这些方法基本上已经没有人使用了，因为结果通常不是语义化的标记。

方法	输出
anchor(name)	<a name="name">string</a>
big()	<big>string</big>
bold()	<b>string</b>
fixed()	<tt>string</tt>

fontcolor(color)	<font color="color">string</font>
fontsize(size)	<font  size="size">string</font>
italics()	<i>string</i>
link(url)	<a href="url">string</a>
small()	<small>string</small>
strike()	<strike>string</strike>
sub()	<sub>string</sub>
sup()	<sup>string</sup>