2022-01-14

javascript---字符串

String(字符串)数据类型表示零或多个16位Unicode字符系列。自负长可以使用双引号("")、单引号('')或反引号(`)标示。

1、字符串的特点

字符串是不可变的,一旦创建,他们的值就不能变了。要修改某个变量中的字符串值,必须先销毁原始的字符串,然后将包含新值的另一个字符串保存到该变量。

2、转换为字符串

  • 方法一 toString()
    这个方法唯一的用途就是返回当前值的字符串的等价物。比如:
let age = 11;
let ageAsString = age.toString();       //  字符串“11”
let found = true;
let foundAsString = found.toString();   // 字符串“true”

toString()方法可用于数值、布尔值、对象和字符串值。null和undefined值没有toString方法。多数情况下,toString()不接受任何参数。不过在数值调用这个方法时,toString()可以接受一个底数参数,即以什么底数来输出数值的字符串表示。

  • 方法二 String()
    如果不能确定一个值是不是null或undefined,可以使用String()转型函数,它始终会返回表示相应类型值的字符串。String()函数遵循如下规则:
    - 如果值有toString()方法,则调用该方法并返回结果。
    - 如果值是null,则返回"null"。
    - 如果值是undefined,则返回"undefinde"。
let value1 = 10;
let value2 = true;
let value3 = null;
let value4 = undefined;
console.log(String(value1));      // "10"
console.log(String(value2));      // "true"
console.log(String(value3));      // "null"
console.log(String(value4));      // "undefined"

字符串属性

String是对应字符串的引用类型。每个String对象都有一个length属性,表示字符串中字符的数量。

let stringValue = "hello world";
console.log(stringValue.length)    // 11

字符串方法

1. javascript字符
charAt()方法返回给定索引位置的字符串,由传给方法的整数参数指定。

let message = 'abcde';
console.log(message.charAt(2));    // "c"

2. 字符串操作方法
···concat()方法:用于将一个或多个字符串拼接成一个新的字符串(不改变原字符串)。

let stringValue = "hello ";
let result = stringValue.concat("world");
console.log(result);          // "hello world"
console.log(stringValue);     // "hello "

concat()方法可接受任意多个参数,因此可一次性拼接多个字符串。

let stringValue = "hello ";
let result = stringValue.concat("world", "!");
console.log(result);          // "hello world!"
console.log(stringValue);     // "hello "

虽然concat()方法可以拼接字符串,但更常用的方式使用加号操作符(+)。
··截取字符串方法
···ECMAScript 提供了3个从字符串提取子字符串的方法:slice()、substr()和substring()。这3个方法都返回调用它们的字符串的一个子字符串,而且都接受一个或两个参数。且都不会改变原始字符串。
·····slice()和substring():接受的第一个参数表示子字符串开始的位置,第二个参数表示子字符串结束的位置(即该位置之前的字符串会被提取出来)。
·····substr():接受的第一个参数表示子字符串开始的位置,第二个参数表示返回子字符串的数量。
以上3个方法在任何情况下,省略第二个参数都意味着提取到字符串末尾。

let stringValue = "hello world";
console.log(stringValue.slice(3));         // "lo world"
console.log(stringValue.substring(3));     // "lo world"
console.log(stringValue.substr(3));        // "lo world"
console.log(stringValue.slice(3,7));       // "lo w"
console.log(stringValue.substring(3,7));   // "lo w"
console.log(stringValue.substr(3,7));      // "lo worl"

当某个参数是负值时,slice()方法将所有负值参数都当成字符串长度加上负参数值。substring()方法会将所有负参数值都转化为0。substr()方法将第一个负参数值当成字符串长度加上该值,将第二个负参数值转换为0。

let stringValue = "hello world";
console.log(stringValue.slice(-3));         // "rld"
console.log(stringValue.substring(-3));     // "hello world"
console.log(stringValue.substr(-3));        // "rld"
console.log(stringValue.slice(3,-4));       // "lo w"
console.log(stringValue.substring(3,-4));   // "hel"
console.log(stringValue.substr(3,-4));      // ""(empty string)
  1. 字符串位置方法
    有俩个方法用于在字符串中定位子字符串:indexOf()和lastIndexOf()。
    indexOf():从字符串开头开始搜索传入的子字符串,并返回位置(如果没找到,则返回-1)。
    lastIndexOf():从字符串末尾开始搜索传入的子字符串,并返回位置(如果没找到,则返回-1)。
let stringValue = "hello world";
console.log(stringValue.indexOf("o"));         // 4
console.log(stringValue.lastIndexOf("o"));     // 7

这俩个方法都可以接受可选的第二个参数,表示开始搜索的位置。
indecOf():从这个参数指定的位置开始向字符串末尾搜索,忽略该位置之前的字符。
lastIndecOf():从这个参数指定的位置开始向字符串开头搜索,忽略该位置之后直到字符串末尾的字符。

let stringValue = "hello world";
console.log(stringValue.indexOf("o",6));         // 7
console.log(stringValue.lastIndexOf("o",6));     // 4
  1. 字符串包含方法
    ES6增加了3个用于判断字符串中是否包含另一个字符串的方法。这三个方法都会从字符串中搜索传入的字符串,并返回一个表示是否包含的布尔值。
    startsWith():检查开始于索引0的匹配项。
    endsWith():检查开始于索引(string.length - substring.length)的匹配项。
    includes():检查整个字符串。
let message = "foobarbaz";
console.log(message.startsWith("foo"));     // true
console.log(message.startsWith("bar"));     // false

console.log(message.endsWith("baz"));       // true
console.log(message.endsWith("bar"));       // false

console.log(message.includes("bar"));       // true
console.log(message.includes("qux"));       // false

startsWith()和includes()方法接受可选的第二个参数,表示开始搜素的位置。如果传入第二个参数,则意味着这俩个方法会从指定的位置向着字符串末尾搜索,忽略该位置之前的所有字符。

let message = "foobarbaz";
console.log(message.startsWith("foo"));     // true
console.log(message.startsWith("foo",1));   // false

console.log(message.includes("bar"));       // true
console.log(message.includes("bar",4));     // false

endsWith()方法接受可选的第二个参数,表示应该当作字符串末尾的位置。如果不提供这个参数,默认就是字符串的长度。如果提供这个参数,就好像字符串只有这么多字符一样。

let message = "foobarbaz";
console.log(message.endsWith("bar"));         // false
console.log(message.endsWith("bar",6));       // true
  1. trim()方法
    ECMASrcipt在所有的字符串上都提供了trim()方法。这个方法会创建一个字符串的副本,删除前、后所有的空格符,再返回结果。
let stringValue = "      hello world       ";
let trimmedStringValue = stringValue.trim();
console.log(stringValue);                    // "      hello world"
console.log(trimmedStringValue);             // "hello world"

由于trim()返回的是字符串的副本,因此原始字符串不受影响,即原本的前、后空格符都会保留。另外,trimLeft()和trimRight()方法分别用于从字符串开始和末尾清空空格符。

  1. repeat()方法
    repeat()方法接受一个整数参数,表示要将字符串复制多少次,然后返回拼接所有副本后的结果。
let stringvalue = "na   ";
console.log(stringvalue.repeat(3) + "batman");   // "na   na   na   batman"
  1. padStart()和padEnd()方法
    padStart()和padEnd()方法会复制字符串,如果小于指定长度,则在相应一边填充字符,直至满足长度条件。这俩个方法的第一个参数是长度,第二个参数是可选的填充字符串,默认为空格。
let stringValue = "foo";
console.log(stringValue.padStart(6));        // "   foo"
console.log(stringValue.padStart(9,"."));    // "......foo"
console.log(stringValue.padEnd(6));          // "foo   "
console.log(stringValue.padEnd(9,"."));      // "foo......"

可选的第二个参数并不限于一个字符。如果提供多个字符的字符串,则会将其拼接并截断以匹配指定长度。如果长度小于或等于字符串长度,则会返回原始字符串。

let stringValue = "foo";
console.log(stringValue.padStart(8,"bar"));    // "barbafoo"
console.log(stringValue.padStart(2));          // "foo"
console.log(stringValue.padEnd(8,"bar"));      // "foobarba"
console.log(stringValue.padEnd(2));            // "foo"
  1. 字符串迭代与结构
    字符串原型上暴露了一个@@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']
  1. 字符串大小写转换
    大小写转换包括4个方法:toLowerCase()、toLocaleLowerCase()、toUpperCase()、toLocaleUpperCase()。
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"
  1. 字符串模式匹配方法
    ·····match()方法:这个方法接受一个参数,可以是一个正则表达式字符串,也可以是一个RegExp对象。
let text = "cat,bat,sat,fat";
let pattern = /.at/;
let matches = text.match(pattern);// 等价于pattern.exec(text)
console.log(matches[0]);               // "cat"
console.log(pattern.lastIndex);        // 0

·····search()方法:这个方法接受一个参数,可以是一个正则表达式字符串,也可以是一个RegExp对象。这个方法返回模式第一个匹配的位置索引,如果没有找到则返回-1。search()始终从字符串开头向后匹配模式。

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

·····split():这个方法会根据传入的分隔符将字符串拆分成数组。作为分隔符的参数可以是字符串,也可以是RegExp对象。还可以传入第二个参数,即数组大小,确保返回的数组不回超过指定大小。

let colorText = "red,blue,green,yellow";
let colors1 = colorText.split(",");
let colors2 = colorText.split(",",2);
console.log(colors1);    // ['red', 'blue', 'green', 'yellow']
console.log(colors2);    // ['red', 'blue']
 console.log(colors3);    // ['', ',', ',', ',', '']
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 212,657评论 6 492
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,662评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 158,143评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,732评论 1 284
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,837评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,036评论 1 291
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,126评论 3 410
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,868评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,315评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,641评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,773评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,470评论 4 333
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,126评论 3 317
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,859评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,095评论 1 267
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,584评论 2 362
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,676评论 2 351

推荐阅读更多精彩内容