js String对象

Posted on   |   In   |     |   Views

String 类型

String 类型是字符串的对象包装类型。创建方式有两种：

  • var strObject = new String(“abc”);
  • var strValue = “abc”;

其中，继承的 valueOf()，toLocaleString()，toString() 方法，都返回对象所表示的基本字符串值。

String 类型的实例都有一个 length 属性，表示包含多少个字符，可以用来获取字符串的长度。

字符方法:

charAt() 和 charCodeAt()

  • charAt(下标);获取该下标位置的字符串
  • charCodeAt(下标);获取对应下标字符串的ASCII的码值
    • charAt() 和 charCodeAt() 方法接收一个参数，即基于 0 的字符位置
1
2
var str = "abc";
console.log(str.charAt(1));  // "a"
  • concat(字符串);
    • 拼接字符串，用于将一个或多个字符串拼接起来，得到新串
    • concat 可以接收任意多个参数
1
2
var str = "abc";
console.log(str.concat("de", "fgh")); // "abcdefgh"

slice()、substring() 和 substr()

  • slice(开始下标,结束下标);截取一段字符串的
  • substring(开始的下标,结束的下标);截取指定部分的字符串
  • substr(开始的下标，截取的个数);截取指定长度的字符串
    • slice(), substring(), substr() 这三个方法都会返回被操作字符串的一个子串
    • 都接受一个或两个参数
    • 第二个参数表示子字符串到哪里结束
    • slice() 和 substring() 第二个参数是子字符串最后一个字符后面的位置
    • substr() 的第二个参数是指返回的字符个数
    • 如果没有给这三个方法指定第二个参数，则将字符串的长度作为结束位置。
    • 这几个方法都返回新字符串，不影响原字符串.
1
2
3
4
5
6
7
var str = "Hello World";
console.log(str.slice(3));  // "Hello World"
console.log(str.substring(3)); // "Hello World"
console.log(str.substr(3)); // "Hello World"
console.log(str.slice(3, 7)); // "lo W"
console.log(str.subtring(3, 7)); // "lo W"
console.log(str.subtr(3, 7)); // "lo Worl"
  • 传入负值时，slice() 方法会将传入的负值与字符串的长度相加
  • substr() 方法将负的第一个参数加载字符串的长度，而将负的第二个参数转为 0
  • substring() 方法会把所有负值参数都转换为 0 。
1
2
3
4
5
6
7
var str = "Hello World";
console.log(str.slice(-3));  // "rld"
console.log(str.substring(-3)); // "Hello World"
console.log(str.substr(-3)); // "rld"
console.log(str.slice(3, -4)); // "lo W" 会将传入的负值与字符串的长度相加，第二个值转成了7
console.log(str.subtring(3, -4)); // "Hel", 会将较小的数作为起始位置，将较大的说作为结束位置
console.log(str.subtr(3, -4)); // ""

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

  • toLocaleUpperCase 字符串转大写, 针对特定地区
  • toUpperCase 字符串转大写
  • toLocaleLowerCase 字符串转小写, 针对特定地区
  • toLowerCase 字符串转小写
1
2
3
4
5
var str = "Hello World";
console.log(str.toLocaleUpperCase());  // "HELLO WORLD"
console.log(str.toUpperCase());  // "HELLO WORLD"
console.log(str.toLocaleLowerCase());  // "hello world"
console.log(str.toLowerCase());  // "hello world"

indexOf() 和 lastIndexOf()

  • indexOf 查找指定的字符串，找到则返回下标，找不到返回-1
  • lastIndexOf 从后面向前面找指定的字符串，找不到也是返回的是-1
    • indexOf() 和 lastIndexOf() 方法都是从一个字符串中搜索给定的子字符串，
    • 返回子字符串的位置
    • 找不到则返回 -1 
1
2
3
var str = "Hello World";
console.log(str.indexOf("o"));  // 4
console.log(str.lastIndexOf("o"));  // 7
  • indexOf() 和 lastIndexOf() 方法都可以接收第二个参数，表示从字符串中的哪个位置开始搜索
  • indexOf() 会从指定位置向后搜索，忽略指定位置之前的
  • lastIndexOf() 会从指定位置向前搜索，忽略指定位置之后的
1
2
3
var str = "Hello World";
console.log(str.indexOf("o", 6));  // 7
console.log(str.lastIndexOf("o", 6));  // 4

查找某个元素在字符串中出现的位置

1
2
3
4
5
6
7
8
var str = "Spell at all costs， to rush you in the future。",
    position = [],
    pos = str.indexOf("t");
while( pos > -1 ){
  position.push(pos);
  pos = str.indexOf("t", pos + 1); 
}
console.log(position); // [7, 16, 20, 35, 41]
  • trim 切掉字符串前面和后面的空格
    • 创建一个字符串的副本，删除前置以及后缀空格，然后返回结果
1
2
3
4
var str = "    Hello World   ";
var strTrim = str.trim();
console.log(str);  // "    Hello World   "
console.log(strTrim);  // "Hello World"

字符串匹配模式方法

  • match() 直接受一个参数，要么是一个正则表达式，要么是一个 RegExp 对象
1
2
3
4
5
6
7
8
var str = "cat, bat, sat, fat";
var pattern = /.at/;
// 与 pattern.exec() 方法相同
var matches = str.match(pattern);
console.log(matches.index);  // 0
console.log(matches[0]);  // "cat"
console.log(matches);  // ["cat", index: 0, input: "cat, bat, sat, fat"]
console.log(pattern.lastIndex);  // 0

以上的实例中 match 方法返回了一个数组； 如果是调用 RegExp 对象的 exec() 方法并,传递本例中的字符串作为参数，那么也会得到与此相同的数组：数组的第一项是与整个模式匹配的字符串，之后的每一项（如果有）保存着与正则表达式中的捕获组匹配的字符串；

  • search() 方法
    • 唯一参数与 match() 方法的相同：
    • 由字符串或 RegExp 对象指定的一个正则表达式。
    • 该方法返回字符串中第一个匹配项的索引；
    • 如果没有找到返回 -1
1
2
3
var str = "cat, bat, sat, fat";
var pos = str.search(/at/);
console.log(pos);  // 1
  • replace() 方法
    • 两个参数：
      • 第一个可以是一个 RegExp 对象或者一个字符串（这个字符串不会被转成正则表示）
      • 第二个参数可以是一个字符串或者一个函数
    • 如果第一个参数是字符串，只会替换第一个字符串
    • 要替换所有，指定正则表达式，指定 g 标志
1
2
3
4
5
var str = "cat, bat, sat, fat";
var res1 = str.replace("at", "ond");
var res2 = str.replace(/at/g, "ond");
console.log(res1);  // "cond, bat, sat, fat"
console.log(res2);  // "cond, bond, sond, fond"
  • replace() 方法的第二个参数可以是函数。
    • 在只有一个匹配项（即与模式匹配的字符串）的情况下，会向函数传递三个参数
    • 模式匹配项、模式匹配项在字符串中的位置和原始字符串。
    • 在正则表达式定义了多个捕获组的情况下，
    • 传递给函数的参数一次是模式的匹配项、第一个捕获组的匹配项、第二个捕获组的匹配项……
    • 最后两个参数依然分别是模式匹配项在字符串中的位置和原始字符串。
    • 函数返回一个字符串，表示应该被替换的匹配项。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
function htmlEscape(text){
  return text.replace(/[<>"&]/g, function(match, pos, orginText){
    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;Hello World!&lt;/p&gt;
  • split 切割指定的字符串的，返回的是一个数组
    • 基于指定的分隔符将一个字符串分隔成多个子字符串，并将结果放在数组中
    • 分隔符可以是一个 RegExp 对象。
    • 可接受第二个可选的参数，指定数组中大小。
1
2
3
4
5
6
7
var color = "red,green,yellow,blue";
var colors1 = color.split(",");
console.log(colors1);  // ["red", "green", "yellow", "blue"]
var colors2 = color.split(",", 2);
console.log(colors2);  // ["red", "green"]
var colors3 = color.split(/[^\,]+/);
console.log(colors3);  //["", ",", ",", ",", ""]

localCompare()

此方法比较两个字符串，并返回：

  • 若字符串再字母表中排在字符串参数之前，返回一个负数，大多数情况下为 -1
  • 若字符串邓毅字符串参数，返回 0
  • 若字符串再字母表中排在字符串参数之后，返回一个正数，大多数情况下为 1
1
2
3
4
var str = "yellow";
console.log(str.localCompare("brick"));  // 1
console.log(str.localCompare("yellow"));  // 0
console.log(str.localCompare("zoo"));  // -1

fromCharCode()

这个方法是 String 构造函数的静态方法，接收一个多字符编码，转化为一个字符串

1
console.log(String.fromCharCode(104, 101, 108, 108, 111)); // "hello"

HTML 方法

  • anchor() <a name="name">string</a>
  • big() <big>string</big>
  • bold() <b>string</b>
  • fixd() <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>
感谢您的支持！