JavaScript中的字符串

@(javascript)[js字符串]
[toc]

JavaScript中的字符串

字符串是JavaScript中7种数据中的一种,用于表示由零个或多个16位的Unicode字符组成的字符序列。创建字符串有两种方式,一种是字面量,另一种是构造函数。

  1. 字面量
var str = "一个字符串";
  1. 构造函数
var str = new String("一个字符串");

上面就是两个字符串,但是字面量对构造函数说:“我们不一样。”那有啥不一样?好。下面来看看具体的。

var str1 = "一个字符串";
console.log(str1);  // 一个字符串
console.log(typeof str1);   // string
var str2 = new String("一个字符串");
console.log(str2);  // String {"一个字符串"}
console.log(typeof str2);   // object

可以看出来两个的值与类型都不相同。使用字面量就是返回一个字符串。使用构造函数则是一个字符串对象。如果要将字符串对象转换为字符串。可以使用toStringtoLocalSringvalueOf转换为字符串。

var str2 = new String("一个字符串");
console.log(str2);  // String {"一个字符串"}
console.log(typeof str2);   // object
console.log(str2.toString())    // 一个字符串
console.log(str2.toLocaleString())  // 一个字符串
console.log(str2.valueOf()) // 一个字符串

这样要使用一个字符串费劲。所以一般看不到这样的操作,都是使用的字面量定义。下面的关于字符串的一些方法都将使用字面量的形式。

字符串是有长度的

字符串是有长度这个属性的。从刚刚的构造函数中可以看出来。获取长度使用length属性就不在过多的说明。

字符方法

字符串用于两个访问特定字符的方法:
charAt:一个参数,返回给定位置的字符
charCodeAt:一个参数,返回给定位置的字符的字符编码
以及一个将字符编码转换为字符的方法,这个是String构造函数的
fromCharCode

var str = "测试字符方法";
console.log(str.charAt(2)); // 字
console.log(str.charCodeAt(2)); // 23383

console.log(String.fromCharCode(23383)) // 字

// charAt()方法获取指定位置的字符还可以直接使用下标获取,因为字符串是有长度的。
console.log(str[2]);    // 字

虽说可以使用下标获取指定位置的字符。但是此方法不兼容IE8以下。所以如果使用需要谨慎。

字符操作方法

concat() - 拼接字符串

concat方法用于讲一个或者多个字符串拼接起来。所以他接收一个或者多个字符创作为参数。

var str = "我";
var res = str.concat("喜","欢","你","!");
console.log(str);   // 我
console.log(res);   // 我喜欢你!

经过上面的代码发现,使用concat是不会影响原字符串的。这个方法在数组中也存在,不过那是连接数组了。
虽说可以使用concat方法连接两个或者两个以上的字符串,但是基本不使用。开发中还是使用+号拼接的使用更多。

substr(),substring(),slice() - 切割字符串

三个方法都是基于字符串创建新字符的方法,都接收一个或者两个参数,返回一个新字符串,不影响原字符串。第一个参数是切割的开始位置(包括这个位置)。

substr:第二个参数指切割的字符串的个数,因为是个数。所以包含最后一个
substring:第二个参数指切割的字符串的位置,不包含最后一个
slice:第二个参数指切割的字符串的位置,不包含最后一个
三个若都没有第二个参数。默认都字符串末尾

var str = "我喜欢你一生一世!";
// 传递的参数是一个正数
console.log(str.substr(2)); // 欢你一生一世!
console.log(str.substring(2)); // 欢你一生一世!
console.log(str.slice(2)); // 欢你一生一世!

console.log(str.substr(2,3));   // 欢你一
console.log(str.substring(2,3));    // 欢
console.log(str.slice(2,3));    // 欢

// 传递的参数是一个负数
console.log(str.substr(-3));    // 一世!
console.log(str.substring(-3)); // 我喜欢你一生一世!
console.log(str.slice(-3)); // 一世!

console.log(str.substr(3,-4));  // 空字符串
console.log(str.substring(3,-4));   // 我喜欢
console.log(str.slice(3,-4));   // 你一

对比上面的代码。当两个参数都是正数的时候很简单。但是当两个都是负数的时候,问题就来了。substr会将负的第一个参数从后往前数第几位作为开始位置。负的第二个参数转化为0。slice会将负数全部从后往前数。但是substring像是没事人一样。把负数忽略了。转化为0,同时以较小数作为开始位置。

字符串位置方法 - 查找字符串

indexOf:从头到尾的找
lastIndexOf:从尾到头的找
两个方法都接收一个或者两个参数,第一个是需要查找的字符,第二个是从哪个位置开始查找(下标,默认是0)。

var str = "我是真的真的喜欢你!";
//         0 1 23 4 56 7 8
console.log(str.indexOf("真"));  // 2
console.log(str.lastIndexOf("真"));  // 4

console.log(str.indexOf("真",3));    // 4
console.log(str.lastIndexOf("真",3));    // 2

console.log(str.indexOf("他"));  // -1
console.log(str.lastIndexOf("他"));  // -1

可以看的,不管是indexOf还是lastIndexOf找到字符串后都会返回这个字符的下标。不过一个是正着数一个是倒着数。但是当去寻找小三的时候没有发现小三旧放回一个-1

所以,两个方法都是找到返回下标(注意从哪头开始的)。未找到返回 -1

trim()方法

trim()方法很简单,就是取出字符串的收尾的空格。但是此方法不兼容IE8及以下。

var str = "   我喜欢你!   ";
console.log(str);   //    我喜欢你!   
console.log(str.trim()); // 我喜欢你!

如果是要兼容IE8及以下,可是使用正则去替换。

var str = "   我喜欢你!   ";
var res = str.replace(/^\s*|\s*$/g,"");
console.log(res); // 我喜欢你!

var str = "   我喜  欢你!   ";
var res = str.replace(/^\s*|\s*$/g,"");
console.log(res);   // 我喜  欢你!

大小写转化方法

四个方法:
toLowerCase:转换为小写
toLocaleLowerCase:转换为当地时区小写,一些地方专用
toUpperCase:转换为大写
toLocaleUpperCase:转换为当地时区大写,一些地方专用

var str = "I Love You!";
console.log(str.toLowerCase()); // i love you!
console.log(str.toLocaleLowerCase());   // i love you!
console.log(str.toUpperCase()); // I LOVE YOU!
console.log(str.toLocaleUpperCase());   // I LOVE YOU!

为了保险起见,使用带Locale的更好。

字符串匹配方法

match() - 匹配

match本质上与RegExp的exec()方法是一样的。接收一个参数,正则表达式或者是RegExp对象。返回一个数组。

var str = "bat,cat,fat,hat";
var reg = /.at/g;
var res = str.match(reg);
console.log(res)    // (4) ["bat", "cat", "fat", "hat"]

var res = str.match(reg);var res = reg.exec(str);本质上相同。但是后面的无论是不是全局都是返回长度为1的数组。如果不是全局匹配,两者没有区别。

search() - 搜索

search的参数与match一样。search方法返回字符串中第一个匹配项的索引。没有则返回-1

var str = "bat,cat,fat,hat";
var reg = /at/;
var res = str.search(reg);
console.log(res); // 1。因为第一个 a 的下标为 1

replace() - 替换

replace方法是字符串中十分重要的一个方法,必须掌握。接收两个参数

第一个参数:可以是一个字符串或者是一个正则
第二个参数:可以是一个字符串或者是一个函数

第二个参数是字符串

var str = "abcdcba";
var res1 = str.replace("b","逼");
console.log(res1);  // a逼cdcba

var res2 = str.replace(/b/g,"逼");
console.log(res2);  // a逼cdc逼a

第一个参数为字符串基本不用,因为他只能匹配第一个,且只能匹配一个

第二个参数是函数
如果是函数
第一个参数:匹配项
中间的参数:捕获组1,捕获组2,捕获组3······
倒数第二个:位置
最后一个:原始字符串

var str = "fathermatherbrothersister";
var reg = /father(mather(brother(sister)))/;

var res = str.replace(reg,function(match,capture1,capture2,capture3,pos,originalText){
    console.log(match); // fathermatherbrothersister
    console.log(capture1); // matherbrothersister
    console.log(capture2); // brothersister
    console.log(capture3); // sister
    console.log(pos); // 0
    console.log(originalText); // fathermatherbrothersister
})
console.log(res); // undefined 。因为第二个参数无返回值

第二个参数既然可以拿到这些东西。那我们就可以做任何事情。

split() - 分割

split方法可以将字符串按指定的符号进行分割,返回一个数组。
第一个参数:分隔符。字符串或者正则
第二个参数:可选。返回数字的长度,不能大于可切割的长度

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

推荐阅读更多精彩内容