【JS】7--字符串String

创建字符串2个方法:

  • 1.字面量创建:
let a = 'hello';  // "hello"
typeof a; // "string"
  • 2.字符串对象创建:
let a = new String('hello'); //String {"hello"}
typeof a; // "object"

实际开发中,除非必要,建议使用字面量创建,因为两种创建方法会有差异:

let a1 = "1+1";
let a2 = new String("1+1");
eval(a1); // number  2
eval(a2); // string  "1+1"

String有一个length属性,表示字符串中字符个数:

let a = "hello";
a.length; // 5

1. String对象方法

String对象的方法非常多,建议大家可以到 W3school JavaScript String 对象
asp) 学习完整的内容。

方法 描述
length 长度
indexOf(char,from),lastIndexOf() 分别返回字符串中指定子串的 索引 或最后出现索引。未找到返-1
search() 检索字符串中的字符串,search() 方法搜索特定值的字符串,并返回匹配的位置:
slice(start,end) 从一个字符串提取片段并作为新字符串返回。
substring() 类似于 slice()。不同之处在于 substring() 无法接受负的索引。
substr() 类似于 slice()。不同之处在于第二个参数规定被提取部分的长度。
replace() 字符串替换
charAt(index), charCodeAt, codePointAt 返回字符串指定位置的字符或者字符编码
startsWith, endsWith,includes 返回字符串是否以指定字符串开始、结束或包含指定字符串。
concat() 连接两个字符串并返回新的字符串。
fromCharCode, fromCodePoint 从指定的Unicode值序列构造一个字符串。这是一个String类方法,不是实例方法。
split() 通过将字符串分离成一个个子串来把一个String对象分裂到一个字符串数组中。
substring(), substr() 分别通过指定起始和结束位置,起始位置和长度来返回字符串的指定子集。
match, replace,search 通过正则表达式来工作.
toLowerCase, toUpperCase 分别返回字符串的小写表示和大写表示。
normalize 按照指定的一种 Unicode 正规形式将当前字符串正规化。
repeat 将字符串内容重复指定次数后返回。
trim 去掉字符串开头和结尾的空白字符。

1. 字符串转换

字符串转换是最基础的要求和工作,你可以将任何类型的数据都转换为字符串,你可以用下面三种方法的任何一种:

var num=24;
var mystr=num.toString();    //"24"

你同样可以这么做:

var num=24;
var mystr=String(num);    //"24"

或者,在简单点儿:

var num=24;
var mystr="" + num;    //"24"

2. charAt -------查找字符串位置

作用:查找字符串中指定位置内容
str.charAt(index) index : 查找的字符的下标(大于等于0,若小于0则返回空字符串),若没传则表示1。

let a = "hello leo!"
a.charAt();  // "h"
a.charAt(1); // "e"
a.charAt(-1);// ""

同样,它的一个兄弟函数就是查找对应位置的字符编码值,如:

var mystr="Hello World!";
var charCode=mystr. charCodeAt(7);    //111  

3. indexOf() 和 lastIndexOf() ------字符串下标搜索

作用:查找指定字符串位置
indexOflastIndexOf相同点:
两者接收的参数一致,没有查到内容,返回-1
indexOflastIndexOf不同点:
若查找到内容,则indexOf返回第一次出现的索引lastIndexOf返回最后一次出现的索引

str.indexOf(value[, fromIndex])接收2个参数:

  • value : 需要查找的字符串内容;
  • fromIndex : 可选,开始查找的位置,默认0;
let a = 'hello leo';     
let b = a.indexOf('lo');  // 3
let c = a.indexOf('lo',4);// -1
let e = a.lastIndexOf('l');  // 6

一定要注意:

  1. fromIndex > a.length,则fromIndex被视为a.length
let a = 'hello leo';  
let b = a.indexOf('lo',99);// -1
  1. fromIndex < 0,则fromIndex被视为0
let a = 'hello leo';  
let b = a.indexOf('lo',-1);// 3
  1. indexOflastIndexOf区分大小写。
let a = 'hello leo'; 
let b = a.indexOf('Lo'); // -1

4. concat() ------------ 字符串拼接

作用:连接字符串。

  • concat()接收任意个参数作为连接的字符串,返回一个合并后的新字符串。
  • concat()函数可以有多个参数,传递多个字符串,拼接多个字符串。
let a = 'hello';
let b = ' leo ';
let c = '!'
a.concat(b,c); // "hello leo !"

5. split ()--------字符串分割

作用:把字符串分割为字符串数组,并可以指定分隔符。
split(separator[,limit])可以接收2个参数:

  • separator:必需,字符串或者正则表达式,作为分割的内容;
  • limit:可选,作为指定返回的数组的最大长度;

separator"",则字符串会在每个字符之间分割;

let a = 'How are you doing today?';
a.split();
// ["How are you doing today?"]
a.split("");
// ["H", "o", "w", " ", "a", "r", "e", " ", "y", "o", "u", " ", "d", "o", "i", "n", "g", " ", "t", "o", "d", "a", "y", "?"]
a.split(" ");
// ["How", "are", "you", "doing", "today?"]
a.split("",4);
// ["H", "o", "w", " "]
a.split(" ",4);
// ["How", "are", "you", "doing"]

使用其他分割符号:

let a = "ni,hao,a!";
a.split(","); // ["ni", "hao", "a!"]

6. slice

作用:提取并返回字符串的片断。
slice([start,end]) 可以接收2个参数:

  • start:要提取的片段的起始下标,若小于零,则从字符串尾部开始算起,如-1表示字符串最后一个字符,-2为倒数第二个字符等等。
  • end:要提取的片段的结束下标,若没有传入,则表示从start到字符串结尾,若为负数则从字符串尾部开始算起。
let a = 'How are you doing today?';
a.slice();      // "How are you doing today?"
a.slice(1);     // "ow are you doing today?"
a.slice(-1);    // '?'
a.slice(1,5);   // "ow a"
a.slice(1,-1);  // "ow are you doing today"
a.slice(-2,-1); // "y"

7. substring() substr() slice()

有三种可以从字符串中抽取和切割的方法:
第一种:substring()函数:

var mystr="hello world!";
var sliceStr1=mystr.substring(3);    //lo world!
var sliceStr2=mystr.substring(3,7);    //lo w    从3开始,结束位置7

第二种:substr()函数:

var mystr="hello world!";
var sliceStr1=mystr.substr(3);    //lo world!
var sliceStr2=mystr.substr(3,7);    //lo wo    从3开始,长度为7

第三种,slice()函数:

var mystr="hello world!";
var sliceStr1=mystr.slice(-3);    //ld!
var sliceStr2=mystr.slice(-3,-1);    //ld
var sliceStr3=mystr.slice(3);    //lo world!
var sliceStr4=mystr.slice(3,7);    //lo w

注:
1.slice() 可以为负数,如果起始位置为负数,则从字符串最后一位向前找对应位数并且向后取结束位置,如果为正整数则从前往后取起始位置到结束位置。
2.substring()只能非负整数,截取起始结束位置同slice()函数一致。
3.substr()与第一、第二种函数不同,从起始位置开始截取,结束位置为第二个参数截取的字符串最大长度。
以上三种函数未填第二参数时,自动截取起始位置到字符串末尾。

8. replace()字符串替换

仅仅查找到字符串并不会是题目的停止,一般题目还经常会要求你去进行替换操作,那就继续看以下代码:

var mystr="我爱我的祖国,我的祖国也爱我";  
var replaceStr=mystr.replace("祖国"," ");    //我爱我的 ,我的 也爱我
var replaceStr=mystr.replace(/祖国/g,"国家 ");    //我爱我的国家,我的国家也爱我

默认只进行第一次匹配操作的替换,想要全局替换,需要置上正则全局标识g

9. length() 获取字符串长度

获取字符串的长度经常会用到,方法很简单:

var mystr="qingchenghuwoguoxiansheng,woaishenghuo,woaiziji";
var arrLength=mystr.length;    //47  

10、trim() 字符串去空格

trim()方法用来删除字符串前后的空格

var mystr="     hello world      ";  
var trimStr=mystr.trim();    //hello world

常用的字符串操作

1、字符串去重

var str="aahhgggsssjjj";
function removeRepeat(msg){  
    var res=[];  
    var arr=msg.split("");  
    for(var i=0;i<arr.length;i++){  
        if(res.indexOf(arr[i])==-1){  
            res.push(arr[i]);  
        }  
    }  
    return res.join("");  
}  
removeRepeat(str);    //ahgsj

2、判断字符串中字符出现的次数

 1.先实现字符串去重  
 2.然后对去重后的数组用for循环操作,分别与原始数组中各个值进行比较,如果相等则count++,循环结束将count保存在sum数组中,然后将count重置为0  
 3.这样一来去重后的数组中的元素在原数组中出现的次数与sum数组中的元素是一一对应的  
var str="aacccbbeeeddd";  
var sum=[];  
var res=[];  
var count=0;  
var arr=str.split("");  
for(var i=0;i<arr.length;i++){  
    if(res.indexOf(arr[i])==-1){  
        res.push(arr[i]);  
    }  
}  
for(var i=0;i<res.length;i++){  
    for(var j=0;j<arr.length;j++){  
        if(arr[j]==res[i]){  
            count++;  
        }  
    }  
    sum.push(count);  
    count=0;  
}  
console.log(res);    //["a", "c", "b", "e", "d"]  
for(var i=0;i<res.length;i++){  
    var str=(sum[i]%2==0)?"
    console.log(res[i]+"
    console.log(res[i]+"
}  

PS:若对字符串学习还是不够透彻,请查阅W3C

http://www.w3school.com.cn/jsref/jsref_obj_string.asp
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/String

2.字符串拓展(ES6)

2.1 includes(),startsWith(),endsWith()

在我们判断字符串是否包含另一个字符串时,ES6之前,我们只有typeof方法,ES6之后我们又多了三种方法:

  • includes():返回布尔值,表示是否找到参数字符串
  • startsWith():返回布尔值,表示参数字符串是否在原字符串的头部
  • endsWith():返回布尔值,表示参数字符串是否在原字符串的尾部
let a = 'hello leo';
a.startsWith('leo');   // false
a.endsWith('o');       // true
a.includes('lo');      // true

并且这三个方法都支持第二个参数,表示起始搜索的位置。

let a = 'hello leo';
a.startsWith('leo',1);   // false
a.endsWith('o',5);       // true
a.includes('lo',6);      // false

endsWith 是针对前 n 个字符,而其他两个是针对从第n个位置直到结束。

2.2 repeat()

repeat方法返回一个新字符串,表示将原字符串重复n次。
基础用法

'ab'.repeat(3);        // 'ababab'
'ab'.repeat(0);        // ''

特殊用法:

  • 参数为小数,则取整
'ab'.repeat(2.3);      // 'abab'

  • 参数为负数Infinity,则报错
'ab'.repeat(-1);       // RangeError
'ab'.repeat(Infinity); // RangeError

  • 参数为0到-1的小数NaN,则取0
'ab'.repeat(-0.5);     // ''
'ab'.repeat(NaN);      // ''

  • 参数为字符串,则转成数字
'ab'.repeat('ab');     // ''
'ab'.repeat('3');      // 'ababab'

2.3 padStart(),padEnd()

用于将字符串头部尾部补全长度,padStart()头部补全padEnd()尾部补全
这两个方法接收2个参数,第一个指定字符串最小长度,第二个用于补全的字符串
基础用法

'x'.padStart(5, 'ab');   // 'ababx'
'x'.padEnd(5, 'ab');     // 'xabab'

特殊用法:

  • 原字符串长度,大于或等于指定最小长度,则返回原字符串。
'xyzabc'.padStart(5, 'ab'); // 'xyzabc'

  • 用来补全的字符串长度和原字符串长度之和,超过指定最小长度,则截去超出部分的补全字符串。
'ab'.padStart(5,'012345'); // "012ab"

  • 省略第二个参数,则用空格补全。
'x'.padStart(4);           // '    x'
'x'.padEnd(4);             // 'x    '

2.4 模版字符串

用于拼接字符串,ES6之前:

let a = 'abc' + 
    'def' + 
    'ghi';

ES6之后:

let a = `
    abc
    def
    ghi
`

拼接变量: 在**反引号()**中使用${}`包裹变量或方法。

// ES6之前
let a = 'abc' + v1 + 'def';

// ES6之后
let a = `abc${v1}def`

3.字符串拓展(ES7)

用来为字符串填充特定字符串,并且都有两个参数:字符串目标长度填充字段,第二个参数可选,默认空格。

'es8'.padStart(2);          // 'es8'
'es8'.padStart(5);          // '  es8'
'es8'.padStart(6, 'woof');  // 'wooes8'
'es8'.padStart(14, 'wow');  // 'wowwowwowwoes8'
'es8'.padStart(7, '0');     // '0000es8'

'es8'.padEnd(2);            // 'es8'
'es8'.padEnd(5);            // 'es8  '
'es8'.padEnd(6, 'woof');    // 'es8woo'
'es8'.padEnd(14, 'wow');    // 'es8wowwowwowwo'
'es8'.padEnd(7, '6');       // 'es86666'

从上面结果来看,填充函数只有在字符长度小于目标长度时才有效,若字符长度已经等于或小于目标长度时,填充字符不会起作用,而且目标长度如果小于字符串本身长度时,字符串也不会做截断处理,只会原样输出。

参考资料

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

推荐阅读更多精彩内容