JavaScript的String字符串对象常用操作总结


Posted in Javascript onMay 26, 2016

创建String对象方式
声明:String对象的方法也可以在所有基本字符串值中访问到。
调用构造函数String():

var str = new String();
 var str = new String('hello world');//初始化str,str.length = 11;

String访问及查找的方式
1.访问(通过索引)
(1)charAt()或[]
1个参数,参数为字符位置,返回字符

var strValue = new String('hello world');
console.log(strValue.charAt(1));//e
console.log(strValue[1]);//e,IE7及以下版本使用这种方式,会返回undefined

(2)charCodeAt()
1个参数,参数为字符位置,返回字符编码

var strValue = new String('hello world');
console.log(strValue.charCodeAt(1));//101

2.查找位置
(1)indexOf()
第一个参数为指定子字符串,第二个参数为检索位置。返回索引,如果没有找到则返回-1

var str = 'hello world'
str.indexOf('l');//2,返回找到的第一个字符的位置
str.indexOf('l',6);//9

(2)lastIndexOf()
与indexOf()的区别在于,lastIndexOf()是从字符串的末尾向前搜索子字符串

字符方法
1.扩展字符串
concat()
接受任意数量参数,用于将一个或多个字符串拼接起来,返回拼接得到新的字符串副本。

var str = new String('hello');
var result = str.concat(' world');
console.log(result);//hello world
typeof result//"string"

2.获取子字符串方法
slice(),substr(),substring(),这三个方法都会返回被操作字符串的子字符串副本,而且也都接受1或2个参数,前闭后开[)
(1)slice()

var str = 'hello';
str.slice(0,2);//"he",第一个参数指定字符串开始的位置,第二个参数表示字符串到哪里结束
str.slice(-3);//"llo",o代表-1,依次倒数,-3代表倒数第三个的l
str.slice(-2,-1);//"l",同理,-2代表倒数第二个l,-1代表倒数第一的o

(2)substring()

var str = 'hello';
str.substring(0,2);//"he",此时的参数意义同str.slice(0,2)
str.substring(-3);//"hello",substring()方法会把所有负值参数转换为0
str.substring(-3,-2);//"",同上

(3)substr()

var str = 'hello';
str.substr(1,2);//"el",第一个参数指定字符串的开始位置,第二个参数指定的则是返回的字符个数
str.substr(-3);//"llo",此时的参数意义同str.slice(-3)
str.substr(-3,-1);//"",substr()方法会将负的第二个参数转换为0

substr()方法传递负值时在IE中存在问题,它会返回原始的字符串,IE9修复了这个问题

3.将字符串转换为数组
split()
基于指定的分隔符(可以是字符串,也可以是RegExp对象)将字符串分割成多个子字符串,并将结果放在一个数组中,可接受可选的第二个参数,用于指定数组的大小,返回数组。

var color = 'blue,red,orange';
color.split();//["red,blue,orange"],长度为1
color.split(',');//["blue", "red", "orange"],长度为3
var color = 'blue-red-orange';
color.split('-');//["blue", "red", "orange"],长度为3
color.split(',',2);//["blue", "red"]

4.字符串大小写转换
toLowerCase(),toUpperCase()

var str = 'hello';
str.toUpperCase();//"HELLO"
str.toLowerCase();//"hello"

5.删除字符串空格方法
trim()
删除字符串中前置以及后缀的所有空格,然后返回结果副本。

var str = ' hello world ';
str.trim()//"hello world"

6.字符串的模式匹配方法
(1)match()
参数:只接受一个参数,要么是一个正则表达式,要么是一个RegExp()对象。
返回:数组。数组中的第一项是与整个模式匹配的字符串,之后的每一项(如果有)保存着正则表达式捕获组匹配的字符串
本质上与调用exec()相同。

var text = 'cat, bat, sat, fat';
var pattern = /.at/;

var matches = text.match(pattern);
matches // ["cat"]
matches.input // "cat, bat, sat, fat"
matches.index // 0

(2)search()
参数:与match()方法相同。
返回:字符串中第一个匹配项的索引,如果没有匹配项,则返回-1。
search()方法始终从前向后找

var text = 'cat, bat, sat, fat';
var pattern = /at/;

text.search(pattern) // 1

(3)replace()
参数:接收两个参数,第一个参数可以是一个RegExp对象或者一个字符串(这个字符串不会转换成正则表达式),第二个参数可以是一个字符串或者一个函数。
如果 第一个参数是字符串,那么只会替换第一个子字符串。要想替换所有子字符串,唯一的办法就是提供一个正则表达式,而且要指定全局标志(g)标志。
如果 第二个参数是字符串,那么还可以使用一些特殊的字符序列,将正则表达式操作得到的值插入到结果字符串中。
也可以是函数,传递给函数的参数依次是模式的匹配项,模式的匹配项在字符串中的位置,和原始字符串。在正则表达式定义了多个捕获组的情况下,传递给函数的参数依次是模式的匹配项,第一个捕获组的匹配项,以此类推,但最后两个参数分别是模式的匹配项在字符串中的位置和原始字符串。

字符序列 替换文本
$$ $
$& 匹配整个pattern中的子字符串
$' 匹配的子字符串之后的子字符串
$` 匹配的字符串之前的子字符串
$n 匹配第n个捕获组中的子字符串,$1
$nn 匹配第nn个捕获组的子字符串,$01

var text = 'xxx-love-xxx';
var pattern = /xxx/g;

var result = text.replace(pattern,'2')
result// "2-love-2"

text.replace(/(xxx)-\w{4}-(xxx)/g,'I love YOU');//"I love YOU"
var text = 'xxx-love-xxx';
var pattern1 = /xxx/g;

var result = text.replace(pattern1,'$$')
result// "$-love-$"

var result = text.replace(pattern1,'$&2')
result//"xxx2-love-xxx2"

var result = text.replace(pattern1,'$\'')
result//"-love-xxx-love-"
Javascript 相关文章推荐
jquery 选择器部分整理
Oct 28 Javascript
jQuery之$(document).ready()使用介绍
Apr 05 Javascript
鼠标焦点离开文本框时验证的js代码
Jul 19 Javascript
document.execCommand()的用法小结
Jan 08 Javascript
js控制网页背景音乐播放与停止的方法
Feb 06 Javascript
jQuery+AJAX实现网页无刷新上传
Feb 22 Javascript
js倒计时抢购实例
Dec 20 Javascript
js实现HashTable(哈希表)的实例分析
Nov 21 Javascript
js通过指定下标或指定元素进行删除数组的实例
Jan 12 Javascript
详解html-webpack-plugin插件(用法总结)
Sep 12 Javascript
vue新vue-cli3环境配置和模拟json数据的实例
Sep 19 Javascript
浅谈Layui的eleTree树式选择器使用方法
Sep 25 Javascript
jquery.form.js框架实现文件上传功能案例解析(springmvc)
May 26 #Javascript
jQuery过滤特殊字符及JS字符串转为数字
May 26 #Javascript
Bootstrap自定义文件上传下载样式
May 26 #Javascript
jQuery控制文本框只能输入数字和字母及使用方法
May 26 #Javascript
JavaScript中0和""比较引发的问题
May 26 #Javascript
Jquery实现select multiple左右添加和删除功能的简单实例
May 26 #Javascript
怎么引入(调用)一个JS文件
May 26 #Javascript
You might like
采用ThinkPHP中F方法实现快速缓存实例
2014/06/13 PHP
Laravel 5框架学习之向视图传送数据
2015/04/08 PHP
php类自动装载、链式操作、魔术方法实现代码
2017/07/23 PHP
Ajax+PHP实现的分类列表框功能示例
2019/02/11 PHP
HTML中事件触发列表与解说
2007/07/09 Javascript
解决extjs在firefox中关闭窗口再打开后iframe中js函数访问不到的问题
2008/11/06 Javascript
jQuery中将函数赋值给变量的调用方法
2012/03/23 Javascript
JS中处理与当前时间间隔的函数代码
2012/05/23 Javascript
jQuery.query.js 取参数的两点问题分析
2012/08/06 Javascript
Bootstrap每天必学之折叠
2016/04/12 Javascript
javascript用正则表达式过滤空格的实现代码
2016/06/14 Javascript
基于原生js淡入淡出函数封装(兼容IE)
2016/10/20 Javascript
Bootstrap + AngularJS 实现简单的数据过滤字符查找功能
2017/07/27 Javascript
深入理解ES6中let和闭包
2018/02/22 Javascript
JavaScript代码实现txt文件的上传预览功能
2018/03/27 Javascript
vue在手机中通过本机IP地址访问webApp的方法
2018/08/15 Javascript
微信小程序日历效果
2018/12/29 Javascript
vue-cli中使用高德地图的方法示例
2019/03/28 Javascript
Vue axios 将传递的json数据转为form data的例子
2019/10/29 Javascript
js实现二级联动简单实例
2020/01/11 Javascript
如何使用 vue-cli 创建模板项目
2020/11/19 Vue.js
[00:13]天涯墨客二技能展示
2018/08/25 DOTA
python九九乘法表的实例
2017/09/26 Python
Python探索之Metaclass初步了解
2017/10/28 Python
django项目运行因中文而乱码报错的几种情况解决
2017/11/07 Python
Python简单定义与使用二叉树示例
2018/05/11 Python
如何通过python的fabric包完成代码上传部署
2019/07/29 Python
Python序列对象与String类型内置方法详解
2019/10/22 Python
Python正则表达式学习小例子
2020/03/03 Python
深入浅出CSS3 background-clip,background-origin和border-image教程
2011/01/27 HTML / CSS
利用HTML5 Canvas制作一个简单的打飞机游戏
2015/05/11 HTML / CSS
StubHub新西兰:购买和出售你的门票
2019/04/22 全球购物
中东最大的在线宠物店:Dubai Pet Food
2020/06/11 全球购物
大学学习计划书范文
2014/05/02 职场文书
《纸船和风筝》教学反思
2016/02/18 职场文书
Nginx内网单机反向代理的实现
2021/11/07 Servers