从头开始复习js之这可能是最全的字符串用法

前面一章主要复习了数组的所有方法,今天我们开始来研究一下字符串的方法吧。

一、 es5的字符串方法

1.1、 字符串新建

  • new方法新建
  • toString方法转化
  • 数组的join
  • 字面量定义
  • length:字符串的长度

关于字符串新建这相对比较简单,我就界面上面几种方式,当然还有很多方式啊。推荐使用数组字面量的方式来新建字符串。

var str = "hello world";

var str = new String("wo shi klivitam");

var str = ["wo","shi","shui"].toString();

var str = ["wo","shi","shui"].join("");

console.log(str.length) // 9

1.2、 字符串与char

  • charAt:将 this 对象转换为一个字符串,返回包含了这个字符串 pos 位置的字符的字符串。如果那个位置没有字符,返回空字符串。返回结果是个字符串值,不是字符串对象。
  • charCodeAt:将 this 对象转换为一个字符串,返回一个代表这个字符串 pos 位置字符的代码单元值的数字(小于 216 的非负整数)。如果那个位置没有字符,返回 NaN。
  • fromCharCode: 返回一个字符串值,包含的字符数与参数数目相同。每个参数指定返回字符串中的一个字符,也就是说第一个参数第一个字符,以此类推(从左到右)

关于这个,其实也有很多的作用,来看下面一段代码:

var str = "hello world";

for(var i=0;i<str.length;i++){
    console.log("charAt:",str.charAt(i),",charCodeAt:",str.charCodeAt(i));
}
// charAt: h ,charCodeAt: 104
// charAt: e ,charCodeAt: 101
// charAt: l ,charCodeAt: 108
// charAt: l ,charCodeAt: 108
// charAt: o ,charCodeAt: 111
// charAt:   ,charCodeAt: 32
// charAt: w ,charCodeAt: 119
// charAt: o ,charCodeAt: 111
// charAt: r ,charCodeAt: 114
// charAt: l ,charCodeAt: 108
// charAt: d ,charCodeAt: 100

上面我们可以查询到,char的unicode值,此时我们再用这些unicode的值利用fromCharCode来创建String,如下面代码所示:

var str = String.fromCharCode(104,101,108,108,111);
console.log(str); // hello

1.3、 字符串查找

  • indexOf: 在给点字符串呢查找出现第一个子串的位置,如果找不到返回-1
  • lastIndexOf:在给点字符串呢查找最后一个出现子串的位置,如果找不到返回-1
  • search:意思跟indexOf类似,唯一有差距的是 传参是正则表达式
  • match:该方法可在字符串内检索指定的值,或找到一个或多个正则表达式的匹配。返回值是查找到的数组哦。
    关于这个方法的使用如下所示:

关于字符串的查找就相对比较简单了,来看下面一段代码:

var str = "hello world";

console.log(str.indexOf("l")); // 2
console.log(str.lastIndexOf("l")); // 9
console.log(str.search(/l/)); // 2

console.log(str.indexOf("k")); // -1
var str="The rain in SPAIN stays mainly in the plain"; 
var n=str.match(/ain/g); // [ 'ain', 'ain', 'ain' ]

关于正则表达式这一块,我今晚在这篇文章写完之后 另开出一章来写

1.4、 字符串大小写转换

  • toLowerCase/toLocaleLowerCase:将字符串中的大写转化成等价的小写
  • toUpperCase/toLocaleUpperCase:将字符串中的小写转化成等价的大写

大小写转换的一个方法,/后面的方法和前面的方法 大同小异,我上网查询了一下,可能在土耳其啥的语言上有点不一样。具体的效果看下面一段代码


var str = "hello WORLD";
console.log(str.toUpperCase()) // HELLO WORLD

console.log(str.toLowerCase()) // hello world

1.5、 字符串截取与拼接

  • concat:字符串的拼接
var str = "hello";
var srr1 ="world";

var str2 = str.concat(" ","world");
console.log(str2); // hello world

如上所示,该方法接收n个字符串,会将所有字符串组合成一个新的字符串。

  • replace:将字符串中的字串替换成给定的字串。
var str = "hello world";
var str1 = str.replace("l","L");
console.log(str1) // heLlo world
console.log(str) //  hello world

这里值得我们注意的是:replace只能替换第一个字符串的位置,做Android的都是知道,Android里面有一个replaceAll方法,但是js没有实现,js应该如何实现呢?

var str = "hello world";
var str1 = str.replace(/l/g,"L");
console.log(str1) // heLLo worLd
console.log(str) //  hello world

从上面代码我们可以知道,replace第一个参数其实是正则表达式,关于正则,跟前面一样 我今晚会写一篇文章来复习这个内容,这里就不再讲解了。

  • slice:slice ,返回这个字符串中从 start 位置的字符到(但不包含)end 位置的字符的一个子字符串(或如果 end 是 undefined,就直接到字符串尾部)
var str = "hello world";

console.log(str.slice(0,5)); // hello
console.log(str.slice(-5)); // world
console.log(str.slice(0,100)); // hello world

这里值得我们注意的点是:
1、 该方法需要两个参数 start 和 end
2、 如果end大于字符串的长度,end默认为字符串的长度
3、 如果存在负数,则代码字符串长度加上负数为该参数

  • split:该方法用于把一个字符串分割成字符串数组
var str = "hello world";

var arr1 = str.split(""); // [ 'h', 'e', 'l', 'l', 'o', ' ', 'w', 'o', 'r', 'l', 'd' ]
var arr2 = str.split("o");// [ 'hell', ' w', 'rld' ]
var arr3 = str.split("",3) // [ 'h', 'e', 'l' ]

这里值得注意的是:aplit接收两个参数,第一个参数是表示从该参数指定的地方开始分割,第二个参数是指定返回数组的长度。

  • substring:该方法用于截取字符串的给定字串

var str = "hello world";

console.log(str.substring(0,5)); // hello
console.log(str.substring(0,1000)); // hello world

主力值得注意的是:substring 方法需要两个参数 start 和 end,,返回包含在转换结果字符串中从 start 位置字符一直到(但不包括)end 位置的字符(或如果 end 是 undefined,就到字符串末尾的一个子串。

  • trim: 该方法去除字符串开头和结尾的空格
var str1 =  "     hello world     1 ";
var str2 = str1.trim()
console.log(str2); // hello world     1
console.log(str1); //      hello world     1 

值得注意的是,该方法只能去除开头和结尾的空格,不能去除所有的空格哦。

二、 es5后的字符串方法

2.1、 字符串的查找

  • includes: 返回布尔值,表示是否找到了参数字符串。
  • startsWith:返回布尔值,表示参数字符串是否在原字符串的头部。
  • endsWith:返回布尔值,表示参数字符串是否在原字符串的尾部。
let str = 'Hello world!';

str.startsWith('Hello') // true
str.endsWith('!') // true
str.includes('o') // true
str.startsWith('world', 6) // true
str.endsWith('Hello', 5) // true
str.includes('Hello', 6) // false

从上面我们可以发现,这三个方法都能接收两个参数,第一个是用来匹配的参数 第二个则是用来定位到查找的位置。但endsWith的行为与其他两个方法有所不同。它针对前n个字符,而其他两个方法针对从第n个位置直到字符串结束。

2.2、 字符串的拼接

  • repeat:该方法返回一个新字符串,表示将原字符串重复n次
'hello'.repeat(2); // "hellohello"
'na'.repeat(0); // ""
'he'.repeat(2.9); // "hehe"
'hello'.repeat(Infinity); // RangeError
'hello'.repeat(-1); // RangeError
'na'.repeat(NaN) // ""
'na'.repeat('na') // ""
'na'.repeat('3') // "nanana"

这里值得我们注意的是:
1、 参数如果是小数,会被取整
2、 如果repeat的参数是负数或者Infinity,会报错
3、 参数NaN等同于 0。
4、 参数是字符串,则会先转换成数字。

  • padStart/padEnd:如果某个字符串不够指定长度,会在头部或尾部补全
'x'.padStart(5, 'ab') // 'ababx'
'x'.padStart(4, 'ab') // 'abax'

'x'.padEnd(5, 'ab') // 'xabab'
'x'.padEnd(4, 'ab') // 'xaba'
'xxx'.padStart(2, 'ab') // 'xxx'
'xxx'.padEnd(2, 'ab') // 'xxx'
'x'.padStart(4) // '   x'
'x'.padEnd(4) // 'x   '

这里值得注意的是:
1、该方法接收两个参数,第一个参数是字符串补全生效的最大长度,第二个参数是用来补全的字符串 当第二个参数被省略的时候,默认用空格填充
2、 如果原字符串的长度,等于或大于最大长度,则字符串补全不生效,返回原字符串。
3、 如果用来补全的字符串与原字符串,两者的长度之和超过了最大长度,则会截去超出位数的补全字符串。

  • 模版字符串
    我们知道,在es6以前的语法,字符串的拼接一般都采用:
var fristStr = "dadasdas"
var secondStr = "bbjbj"
var str = fristStr +secondStr;

在es6中,其实新定义了一种字符串拼接的方式:模版字符串``

模板字符串(template string)是增强版的字符串,用反引号(`)标识。它可以当作普通字符串使用,也可以用来定义多行字符串,或者在字符串中嵌入变量。

上面的代码我们就可以简单的写成:

var str = `${fristStr} +${secondStr}`;

设置里面都还可以做一些运算

var a1 = 1;
var a2 = 2;
console.log(result) // a1+a2 = 3

关于模版字符串,肯定还有更多、更细致的用法,我这里就不做具体的举例了。怎么说了,有些奥妙只有自己在实际使用中才能领会的。

说在最后

关于字符串的使用,这一篇文章把我在开发中经常能用到的一些方法都做了一次总结 怎么说呢?也没几个方法。掌握、记忆起来还是比较简单的,其实最难的无非就是正则表达式哪一块,现在中午也没什么时间了,我就不多说了 先睡会儿觉 等今晚下班了,再来细细的探究所谓的正则表达式吧。

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

推荐阅读更多精彩内容

  •   引用类型的值(对象)是引用类型的一个实例。   在 ECMAscript 中,引用类型是一种数据结构,用于将数...
    霜天晓阅读 1,014评论 0 1
  • 概要 64学时 3.5学分 章节安排 电子商务网站概况 HTML5+CSS3 JavaScript Node 电子...
    阿啊阿吖丁阅读 8,620评论 0 3
  • 第5章 引用类型(返回首页) 本章内容 使用对象 创建并操作数组 理解基本的JavaScript类型 使用基本类型...
    大学一百阅读 3,152评论 0 4
  • 官网 中文版本 好的网站 Content-type: text/htmlBASH Section: User ...
    不排版阅读 4,310评论 0 5
  • capitalize 描述 将字符串的第一个字符大写 语法 实例 输出: islower 描述 判断字符串是否都为...
    安静点就睡吧阅读 1,200评论 0 4