深入探讨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 相关文章推荐
Opacity.js
Jan 22 Javascript
js 父窗口控制子窗口的行为-打开,关闭,重定位,回复
Apr 20 Javascript
JavaScript中的常见问题解决方法(乱码,IE缓存,代理)
Nov 28 Javascript
JS获取文本框,下拉框,单选框的值的简单实例
Feb 26 Javascript
jquery实现不包含当前项的选择器实例
Jun 25 Javascript
jQuery实现内容定时切换效果完整实例
Apr 06 Javascript
浅谈angular懒加载的一些坑
Aug 20 Javascript
javascript动画之模拟拖拽效果篇
Sep 26 Javascript
微信小程序 action-sheet底部菜单详解
Oct 27 Javascript
微信头像地址失效踩坑记附带解决方案
Sep 23 Javascript
vuex页面刷新导致数据丢失的解决方案
Dec 10 Vue.js
Vue实现跑马灯样式文字横向滚动
Nov 23 Vue.js
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
PHP循环获取GET和POST值的代码
2008/04/09 PHP
PHP技术开发技巧分享
2010/03/23 PHP
DedeCMS 核心类TypeLink.class.php摘要笔记
2010/04/07 PHP
php微信公众平台交互与接口详解
2016/11/28 PHP
从父页面读取和操作iframe中内容方法
2009/07/25 Javascript
Jquery 改变radio/checkbox选中状态,获取选中的值(示例代码)
2013/12/12 Javascript
JavaScript+CSS控制打印格式示例介绍
2014/01/07 Javascript
一个JavaScript处理textarea中的字符成每一行实例
2014/09/22 Javascript
$(&quot;&quot;).click与onclick的区别示例介绍
2014/09/25 Javascript
深入浅析Node.js 事件循环
2015/12/20 Javascript
vue keep-alive请求数据的方法示例
2018/05/16 Javascript
详解微信小程序的 request 封装示例
2018/08/21 Javascript
vue多级复杂列表展开/折叠及全选/分组全选实现
2018/11/05 Javascript
vue 点击展开显示更多(点击收起部分隐藏)
2019/04/09 Javascript
element-ui 远程搜索组件el-select在项目中组件化的实现代码
2019/12/04 Javascript
如何用vue-cli3脚手架搭建一个基于ts的基础脚手架的方法
2019/12/12 Javascript
微信小程序拖拽排序列表的示例代码
2020/07/08 Javascript
基于python3 类的属性、方法、封装、继承实例讲解
2017/09/19 Python
基于随机梯度下降的矩阵分解推荐算法(python)
2018/08/31 Python
OpenCV搞定腾讯滑块验证码的实现代码
2019/05/18 Python
Python交互环境下打印和输入函数的实例内容
2020/02/16 Python
python实现数字炸弹游戏
2020/07/17 Python
浅析python字符串前加r、f、u、l 的区别
2021/01/24 Python
中国双语服务优势的在线购票及活动平台:247tickets
2018/10/26 全球购物
美国气象仪器、花园装饰和墙壁艺术商店:Wind & Weather
2019/05/29 全球购物
Stührling手表官方网站:男女高品质时尚手表的领先零售商
2021/01/07 全球购物
Scotch Porter官方网站:男士美容产品
2020/08/31 全球购物
小学生美德少年事迹
2014/02/02 职场文书
商场总经理岗位职责
2014/02/03 职场文书
不听老师话的万能检讨书
2014/10/04 职场文书
大学生党员自我评价
2015/03/04 职场文书
毕业生自荐信范文
2015/03/05 职场文书
上学路上观后感
2015/06/16 职场文书
基于Redis位图实现用户签到功能
2021/05/08 Redis
pytorch 两个GPU同时训练的解决方案
2021/06/01 Python
mysql数据插入覆盖和时间戳的问题及解决
2022/03/25 MySQL