深入探讨JavaScript String对象


Posted in Javascript onMarch 09, 2015

String 字符串对象

1. 介绍

String 对象,对字符串进行操作,如:截取一段子串、查找字符串/字符、转换大小写等等。

2. 定义方式

2.1 new String(Value) 构造函数:返回一个内容为Value的String对象
参数:

①value {String} :字符串

返回值:

{String对象} 返回一个内容为Value的String对象

示例:

var demoStr = new String('abc');

console.log(typeof demoStr); // => object

console.log(demoStr); // => abc

2.2 直接赋值(推荐)
示例:

var demoStr = 'abc';

console.log(typeof demoStr); // string

console.log(demoStr); // => abc

3. 实例属性

3.1 length :返回字符串中的字符数

var s = 'abc';

console.log(s.length); // => 3

console.log('新年快乐'.length); // => 4 :一个中文字符也计算为1个数量

console.log(''.length); // => 0 :空字符串返回0

4. 实例方法

注意:字符串的实例方法不会改变字符串的本身,只返回操作后的结果。

4.1 charAt(index) :返回一个字符串中指定位置的字符,编号从0开始,若传入个不存在的数值,就返回空字符串
参数:

①index {int} :位置索引,从0开始计算

返回值:

{string} 返回一个字符串中指定位置的字符;若传入个不存在的位置数值,返回一个空字符串

示例:

var s = 'abc';

console.log(s.charAt(1)); // => b :返回位置为1的字符

console.log(s); // => 不影响原来的数组

console.log(s.charAt(5)); // => '' :获取一个不存在位置的字符,返回一个长度为0的空字符串

4.2 charCodeAt(index) :返回一个字符串中指定位置字符的Unicode编码
参数:

①index {int} :位置索引,从0开始计算

返回值:

{number}  返回一个字符串中指定位置字符的Unicode编码;若传入个不存在的位置数值,返回NaN

示例:

var s = 'abc';

console.log(s.charCodeAt(0)); // => 98 :字符b的Unicode编码

console.log(s.charCodeAt(5)); // => NaN :获取一个不存在位置的字符,返回NaN

4.3 concat(value1,value2 ... valueN) :连接一个或多个字符串,并返回连接后的字符串
参数:

①value1,value2 ... valueN {string} :一个或多个字符串

返回值:

{string}  返回连接后的字符串

示例:

var s = 'abc';

console.log(s.concat('d')); // => abcd

console.log(s); // => abc :不影响原先的字符串

console.log(s.concat('d', 'e')); // => abcde

4.4 indexOf(value , |startPosition ) :在实例中从前往后查找一个字符串或字符,并返回找到的位置(从0开始计数)。若未找到,返回-1
参数:

①value  {string} :查找的字符串

②startPosition {int} 可选 :开始查找的起始位置,默认从位置0开始查找

返回值:

{int}  返回找到的位置(从0开始计数)。若未找到,返回-1

示例:

var s = 'abc';

console.log(s.indexOf('b')); // => 1

console.log(s.indexOf('d')); // => -1 :未找到

console.log(s.indexOf('b', 2)); // => -1 :从位置2(第3个字符处)开始查找

4.5 lastIndexOf(value , |startPosition ) :在实例中从后往前开始查找一个字符串或字符,并返回找到的位置(从0开始计数)。若未找到,返回-1
参数:

①value  {string} :查找的字符串

②startPosition {int} 可选 :开始查找的起始位置,默认从最后开始查找

返回值:

{int}  返回找到的位置(从0开始计数)。若未找到,返回-1

示例:

var s = 'abcabc';

console.log(s.lastIndexOf('a')); // => 3 :从后往前查找

console.log(s.lastIndexOf('d')); // => -1 :未找到返回-1

console.log(s.lastIndexOf('a', 2)); // => 0 :从位置2(第3个字符处)开始往前查找

4.6 localeCompare(value) :实例与参数进行比较,返回比较结果
参数:

①value  {string} :需比较的字符串

返回值:

0 :实例比参数大

1 :实例与参数相等

  -1 :实例比参数小

示例:

var s='abc';

console.log(s.localeCompare('ab')); // => 1 :实例比参数大

console.log(s.localeCompare('abc')); // => 0 :实例与参数相等

console.log(s.localeCompare('abd')); // => -1 :实例比参数小
 

4.7 match(regexp) :使用正则表达式进行匹配查找
参数:

①regexp {regexp} :正则表达式,eg:/\d+/

返回值:

根据正则表达式是否带属性'g',返回不同的结果;若没匹配,就返回 {null}:

①正则表达式不带属性'g',执行一次匹配,返回{单个匹配}结果对象,对象包含以下属性:

数组序号:表示匹配结果,0为匹配文本,1为从做到右第1个圆括号匹配结果,2为第二个圆括号,依此类推

index属性:表示匹配文本在匹配源的开始位置

input属性:表示匹配源

②正则表达式带属性'g',执行全局匹配,找到字符串所有匹配对象,返回一个{字符串数组}:数组元素包含string中的每一个匹配对象,不包含正则表达式括号内的字串,也不提供index和input属性。

示例:

// 1.单个匹配

var s = 'a1b2c3d4';

var mc = s.match(/\d+/); // => 获取第一个正则匹配的结果

if (mc != null) {

    console.log(mc.index); // => 1 :匹配结果在匹配源的起始位置

    console.log(mc.input) // => a1b2c3d4 :匹配源

    console.log(mc[0]); // => 1 :获取匹配到的结果

}

// 2.全局匹配

var mcArray = s.match(/\d+/g); // => 获取全部正则匹配的数字

if (mcArray != null) {

    for (var i = 0,len=mcArray.length; i < len; i++) {

        var mc=mcArray[i];

        console.log(mc); // => 1,2,3,4 :获取匹配到的结果

    }

}

// 3.带括号的匹配

s = 'a1b2c3d4';

mc = s.match(/[a-z]([1-9])/); // => 获取第一个正则匹配的结果

if (mc != null) {

    console.log(mc.index); // => 0 :匹配结果在匹配源的起始位置

    console.log(mc.input) // => a1b2c3d4 :匹配源

    console.log(mc[0]); // => a1 :序号0表示匹配到的结果

    console.log(mc[1]); // => 1 :序号1表示第一个括号内的子匹配结果

}

4.8  replace(regexp, replaceStr) :替换正则表达式匹配的子串,并返回替换后的字符串
参数:

①regexp {regexp} :正则表达式。eg:/\d+/

②replaceStr {string | function} :

1)若是字符串,表示替换的字符串,匹配到字串都替换成此字符串;

字符串中的$字符有特殊的含义:

$1,$2 ... $99 :表示①参从左到右圆括号的匹配子项

$& :表示整个①参匹配的子项

$$ :美元符号

2)若是函数,表示每个匹配结果都调用此函数,函数的唯一参数为匹配结果,并返回一个替换结果。

返回值:

{string} 返回一个替换后的字符串

示例:

var oldStr = 'a1b2c3d4';

// 1.正则匹配到【所有】数字,替换成:','逗号

var newStr = oldStr.replace(/\d+/g, ',');

console.log(newStr); // => a,b,c,d,

// 2.正则匹配到【所有】数字,替换成:匹配结果 + ','逗号

newStr = oldStr.replace(/\d+/g, '$&,');

console.log(newStr); // => a1,b2,c3,d4,

// 3.正则匹配到【所有】数字,每个匹配结果都调用函数,并返回替换后的结果

newStr = oldStr.replace(/\d+/g, function (word) {

    if (word % 2 == 0) {

        return '偶';

    }

    return '奇';

});

console.log(newStr); // => a奇b偶c奇d偶

4.9 search(regexp) :返回查找正则表达式第一个匹配的位置
参数:

①regexp {regexp} :正则表达式。eg:/\d+/

返回值:

{int} 返回第一个匹配的结果的位置;若没找到匹配结果返回-1

示例:

console.log( 'abcd'.search(/\d+/) ); // => -1 :没有找到数字

console.log( 'abcd1234'.search(/\d+/) ); // => 4 :位置序号为4,返回第一个数字的位置

4.10  slice(start, |end):返回从字符串start位置到end前一个位置的子串
参数:

①start {int} :子串提取的开始位置索引(包括此位置的字符)。

若数字为负,表示从字符串尾部开始计算。如:-1表示倒数一个字符串,-2表示倒数第二个字符。

②end {int} 可选:子串提取的结束位置索引(不包括此位置的字符)。

若数字为负,表示从字符串尾部开始计算。如:-1表示倒数一个字符串,-2表示倒数第二个字符。

若省略此参数,返回从start位置到结束的所有字符。

注意:

子串的提取顺序是从左到有,若start索引位置大于end索引位置,将返回一个空字符串。

返回值:

{string} 返回从字符串start位置到end前一个位置的子串。

示例:

var s = 'abcdefg';

console.log( s.slice(1) ); // bcdefg :省略end参数,结束位置为末尾

console.log( s.slice(1, 3) ); // bc :返回从位置序号1到位置序号2(end前一个位置)的子串

console.log( s.slice(-3) ); // efg :返回从倒数第三个开始到末尾的所有字符

console.log( s.slice(-3, -1) ); // ef :返回从倒数第三个开始到第二个(end前一个位置)的所有字符

4.11 split(delimiter, |arrayLength) :将字符串按照某种分隔符切分成一个由字符串组成的数组并返回
参数:

①delimiter {regexp | string} :指定的分隔符,可以为正则表达式或字符串。

②arrayLength {int} 可选 :分割数组的长度。若省略,返回所有分割的子串。

注意:

若分隔符在字符串的第一个或最后一个,将添加一个空字符串到返回的数组。

返回值:

{ string[] } 返回一个由字符串组成的数组。

示例:

console.log( 'a,b,c,d,e'.split(',') ); // => ["a", "b", "c", "d", "e"]

console.log( ',a,b,c,d,e,'.split(',') ); // => ["", "a", "b", "c", "d", "e", ""] :分隔符在最前或最后面,会添加一个空字符串

console.log( 'a,b,c,d,e'.split(',',3) ); // => ["a", "b", "c"] :返回前3个分割的子串

console.log( 'a1b2c3d4e'.split(/\d/) ); // => ["a", "b", "c", "d", "e"] :将数字来做为分隔符

4.12 substr(start, |wordLength):返回从字符串start位置开始计算到wordLength个长度的子串
参数:

①start {int} :子串提取的开始位置索引(包括此位置的字符)。

若数字为负,表示从字符串尾部开始计算。如:-1表示倒数一个字符串,-2表示倒数第二个字符。

②wordLength {int} 可选 :提取字符的长度。若省略此参数,返回从start位置到结束的所有字符。

返回值:

{string} 返回提取的字符串

示例:

ar s = 'abcdefg';

onsole.log( s.substr(0) ); // =>  abcdefg :省略第二个参数,返回从位置序号0开始,一直到最后的字符

onsole.log( s.substr(0, 3) ); // => abc :返回从位置序号0开始,计数3个字符

onsole.log( s.substr(2, 4) ); // => cdef :返回从位置序号2开始,计数4个字符

onsole.log( s.substr(-2, 3) ); // fg :返回从倒数第二个字符串开始,计数3个(超过字符长度,就只返回可统计的字符)

4.13 substring(start, |end) :返回从字符串start位置到end前一个位置的子串
参数:

①start {int} :子串提取的开始位置索引(包括此位置的字符)。数字不能为负数,若为负数按0来处理

②end {int} 可选:子串提取的结束位置索引(不包括此位置的字符)。数字不能为负数,若为负数按0来处理

返回值:

{string} 返回从字符串start位置到end前一个位置的子串。

示例:

var s = 'abcdefg';

console.log( s.substring(0) ); // =>  abcdefg :省略end参数,返回从位置序号0开始,一直到最后的字符

console.log( s.substring(0, 3) ); // => abc :返回从位置序号0开始到位置序号2(②参的前一个)的字符

console.log( s.substring(2, 4) ); // => cd :返回从位置序号2开始到位置序号3(②参的前一个)的字符

console.log( s.substring(-3, 3) ); // abc :参数若为负,就按数字0来处理,所以此参数实际返回位置序号0到位置序号3的字符

4.14 toUpperCase() :将字符串转换为大写并返回
4.15 toUpperCase() :将字符串转换为小写并返回
4.16 trim() :移除字符串开头和结尾处的空白字符并返回

以上就是本文的全部内容了,希望通过本文,大家对javascript中的String对象能有新的认识。

Javascript 相关文章推荐
javascript实现json页面分页实例代码
Feb 20 Javascript
js实现图片轮播效果
Dec 19 Javascript
浅析AngularJs HTTP响应拦截器
Dec 28 Javascript
jQuery中的一些常见方法小结(推荐)
Jun 13 Javascript
JavaScript中访问id对象 属性的方式访问属性(实例代码)
Oct 28 Javascript
AngularJS自定义插件实现网站用户引导功能示例
Nov 07 Javascript
jQuery实现导航栏头部菜单项点击后变换颜色的方法
Jul 19 jQuery
使用travis-ci如何持续部署node.js应用详解
Jul 30 Javascript
使用svg实现动态时钟效果
Jul 17 Javascript
vue debug 二种方法
Sep 16 Javascript
Jquery实现获取子元素的方法分析
Aug 24 jQuery
layui关闭弹窗后刷新主页面和当前更改项的例子
Sep 06 Javascript
jQuery实现冻结表头的方法
Mar 09 #Javascript
jQuery焦点控制图层展示延迟隐藏的方法
Mar 09 #Javascript
解决bootstrap中modal遇到Esc键无法关闭页面
Mar 09 #Javascript
基于jQuery创建鼠标悬停效果的方法
Mar 07 #Javascript
JS实现文件动态顺序载入的方法
Mar 07 #Javascript
Jquery实现仿腾讯娱乐频道焦点图(幻灯片)特效
Mar 06 #Javascript
PHP守护进程实例
Mar 06 #Javascript
You might like
德生S2000南麂列岛台湾FM收听记录
2021/03/02 无线电
如何突破PHP程序员的技术瓶颈分析
2011/07/17 PHP
php读取mysql的简单实例
2014/01/15 PHP
PHP实现一维数组转二维数组的方法
2015/02/25 PHP
php中return的用法实例分析
2015/02/28 PHP
jquery 模式对话框终极版实现代码
2009/09/28 Javascript
innerHTML 和 getElementsByName 在IE下面的bug 的解决
2010/04/09 Javascript
style、 currentStyle、 runtimeStyle区别分析
2010/08/01 Javascript
jquery Moblie入门—hello world的示例代码学习
2013/01/08 Javascript
js验证是否为数字的总结
2013/04/14 Javascript
JS自调用匿名函数具体实现
2014/02/11 Javascript
分享一些常用的jQuery动画事件和动画函数
2015/11/27 Javascript
JavaScript的Backbone.js框架的一些使用建议整理
2016/02/14 Javascript
Seajs 简易文档 提供简单、极致的模块化开发体验
2016/04/13 Javascript
让div运动起来 js实现缓动效果
2017/07/06 Javascript
JS和JQuery实现雪花飘落效果
2017/11/30 jQuery
利用jquery如何从json中读取数据追加到html中
2017/12/01 jQuery
ajax请求data遇到的问题分析
2018/01/18 Javascript
jQuery实现使用sort方法对json数据排序的方法
2018/04/17 jQuery
Vue路由对象属性 .meta $route.matched详解
2019/11/04 Javascript
在vue中使用防抖和节流,防止重复点击或重复上拉加载实例
2019/11/13 Javascript
vue实现图片上传预览功能
2019/12/23 Javascript
JS实现图片懒加载(lazyload)过程详解
2020/04/02 Javascript
Python使用回溯法子集树模板获取最长公共子序列(LCS)的方法
2017/09/08 Python
Python使用getpass库读取密码的示例
2017/10/10 Python
对python中的iter()函数与next()函数详解
2018/10/18 Python
python 根据时间来生成唯一的字符串方法
2019/01/14 Python
解决webdriver.Chrome()报错:Message:'chromedriver' executable needs to be in Path
2019/06/12 Python
浅谈Python中文件夹和python package包的区别
2020/06/01 Python
记录模型训练时loss值的变化情况
2020/06/16 Python
【HTML5】3D模型--百行代码实现旋转立体魔方实例
2016/12/16 HTML / CSS
美国艺术和工艺品商店:Hobby Lobby
2020/12/09 全球购物
物流专员岗位职责
2014/02/17 职场文书
慰问敬老院活动总结
2014/04/26 职场文书
李培根演讲稿
2014/05/22 职场文书
2016年师德学习心得体会
2016/01/12 职场文书