Javascript中字符串相关常用的使用方法总结


Posted in Javascript onMarch 13, 2017

刚刚在看Javascript犀牛书,看到字符串这一节,平时工作接触到这方面的不多,想着整理下,以备不时只需。

JavaScript的内置功能之一就是字符串连接,如果用‘+'连接两个数字,表示两数相加。但是如果用于字符串,就表示第二个字符加在第一个字符之后。

var num=1+2;
console.log(num);
var msg='hello'+'world';
console.log(msg);

对于字符串来说,除了有length属性,还有很多其他有用的属性,如:

var str='hello,world';
console.log(str.length);
console.log(str.charAt(0)); //第一个字符 
console.log(str.charAt(str.length-1)); // 最后一个字符 
//substring(starti,endi), 截取 字符串 起始startistartii, 到endi结束,且含头不含尾,没有
// 如果第二个参数没有, 就默认截取到最后一个。  
console.log(str.substring(1,4));
console.log(str.substring(1));
//用法同上,为负数时,就是倒数开始算,一个参数含义是倒数几个。
console.log(str.slice(1,4));
console.log(str.slice(-3));
//字符‘l'首次出现的位置 
console.log(str.indexOf('l'));
//字符‘l'最后一次出现的位置 
console.log(str.lastIndexOf('l'));
//在位置下标3之后,首次出现的位置 
console.log(str.indexOf('l',3));
//用‘,'分割为字符串
console.log(str.split(','));
// 把str中的小写h换成大写H
console.log(str.replace('h','H'));
//讲字符串转化为大写
console.log(str.toUpperCase());

提示:在javascript中字符串本身是固定不变的,上述方法都会返回一个新的字符串值,并不会影响str本身的值

值得注意的是,在ES6中,给字符串增加了很多新的方法,如:

var s = 'Hello world!';
// 返回布尔值,表示参数字符串是否在源字符串中的头部
console.log(s.startsWith('Hello')) // true
//endsWith():返回布尔值,表示参数字符串是否在源字符串的尾部
console.log(s.endsWith('!')) // true
// includes()返回布尔值,表示是否找到了参数字符串
console.log(s.includes('o')) // true

上述的三个方法都支持第二个参数,表示开始搜索的位置

var s = 'Hello world!';
console.log(s.startsWith('world', 6)) // true
console.log(s.endsWith('Hello', 5))// true
console.log(s.includes('Hello', 6)) // false

提示:endsWith的行为与其他两个方法有所不同。它针对前n个字符,而其他两个方法针对从第n个位置直到字符串结束。
repeat方法返回一个新字符串,表示将原字符串重复n次。

console.log('x'.repeat(3)) // "xxx"
console.log('hello'.repeat(2)) // "hellohello"
console.log('na'.repeat(0)) // ""

参数如果是小数,会被取整。

console.log('na'.repeat(2.9)) // "nana"
//如果repeat的参数是负数或者Infinity,会报错。
console.log('na'.repeat(Infinity))
// RangeError
console.log('na'.repeat(-1))
// RangeError

但是,如果参数是0到-1之间的小数,则等同于0,这是因为会先进行取整运算。0到-1之间的小数,取整以后等于-0,repeat视同为0。

console.log('na'.repeat(-0.9)) // ""
//参数NaN等同于0
console.log('na'.repeat(NaN)) // "
//如果repeat的参数是字符串,则会先转换成数字
console.log('na'.repeat('na')) // ""
console.log('na'.repeat('3')) // "nanana"

ES2017 引入了字符串补全长度的功能。如果某个字符串不够指定长度,会在头部或尾部补全。padStart()用于头部补全,padEnd()用于尾部补全

//padStart和padEnd一共接受两个参数,第一个参数用来指定字符串的最小长度,第二个参数是用来补全的字符串。
console.log('x'.padStart(5, 'ab')) // 'ababx'
console.log('x'.padStart(4, 'ab')) // 'abax'
console.log('x'.padEnd(5, 'ab')) // 'xabab'
console.log('x'.padEnd(4, 'ab')) // 'xaba'
//如果原字符串的长度,等于或大于指定的最小长度,则返回原字符串。
console.log('xxx'.padStart(2, 'ab')) // 'xxx'
console.log('xxx'.padEnd(2, 'ab')) // 'xxx'
//如果用来补全的字符串与原字符串,两者的长度之和超过了指定的最小长度,则会截去超出位数的补全字符串。
consoe.log('abc'.padStart(10, '0123456789'))
// '0123456abc'
//如果省略第二个参数,默认使用空格补全长度。
console.log('x'.padStart(4)) // ' x'
console.log('x'.padEnd(4)) // 'x '
//padStart的常见用途是为数值补全指定位数。下面代码生成10位的数值字符串。
console.log('1'.padStart(10, '0') )// "0000000001"
console.log('12'.padStart(10, '0')) // "0000000012"
console.log('123456'.padStart(10, '0')) // "0000123456"
//另一个用途是提示字符串格式。
console.log('12'.padStart(10, 'YYYY-MM-DD')) // "YYYY-MM-12"
console.log('09-12'.padStart(10, 'YYYY-MM-DD'))// "YYYY-09-12"

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
Javascript - HTML的request类
Jul 15 Javascript
深入理解jQuery中live与bind方法的区别
Dec 18 Javascript
Javascript实现获取窗口的大小和位置代码分享
Dec 04 Javascript
Eclipse引入jquery报错如何解决
Dec 01 Javascript
javascript特殊日历控件分享
Mar 07 Javascript
jQuery 中的 DOM 操作
Apr 26 Javascript
Bootstrap弹出框modal上层的输入框不能获得焦点问题的解决方法
Dec 13 Javascript
使用DeviceOne实现微信小程序功能
Dec 29 Javascript
剖析Angular Component的源码示例
Mar 23 Javascript
vue watch深度监听对象实现数据联动效果
Aug 16 Javascript
详解Webpack4多页应用打包方案
Jul 16 Javascript
react合成事件与原生事件的相关理解
May 13 Javascript
利用Javascript裁剪图片并存储的简单实现
Mar 13 #Javascript
js实现手机发送验证码功能
Mar 13 #Javascript
Javascript封装id、class与元素选择器方法示例
Mar 13 #Javascript
原生js实现吸顶效果
Mar 13 #Javascript
vue2.0嵌套路由实现豆瓣电影分页功能(附demo)
Mar 13 #Javascript
jquery.flot.js简单绘制折线图用法示例
Mar 13 #Javascript
深入理解Node.js中的进程管理
Mar 13 #Javascript
You might like
windows7下php开发环境搭建图文教程
2015/01/06 PHP
Yii快速入门经典教程
2015/12/28 PHP
解决php用mysql方式连接数据库出现Deprecated报错问题
2019/12/25 PHP
php 使用ActiveMQ发送消息,与处理消息操作示例
2020/02/23 PHP
非常不错的功能强大代码简单的管理菜单美化版
2008/07/09 Javascript
javascript 一些用法小结
2009/09/11 Javascript
jquery 问答知识整理
2010/02/11 Javascript
在新窗口打开超链接的方法小结
2013/04/14 Javascript
用nodejs实现PHP的print_r函数代码
2014/03/14 NodeJs
jQuery拖动div、移动div、弹出层实现原理及示例
2014/04/08 Javascript
使用javascript实现json数据以csv格式下载
2015/01/09 Javascript
js实现Select列表内容自动滚动效果代码
2015/08/20 Javascript
手机浏览器 后退按钮强制刷新页面方法总结
2016/10/09 Javascript
javascript按顺序加载运行js方法
2017/12/01 Javascript
Angularjs Promise实例详解
2018/03/15 Javascript
React中使用UEditor百度富文本的方法
2018/08/22 Javascript
微信小程序五子棋游戏的棋盘,重置,对弈实现方法【附demo源码下载】
2019/02/20 Javascript
简述ES6新增关键字let与var的区别
2019/08/23 Javascript
Bootstrap FileInput实现图片上传功能
2021/01/28 Javascript
Python简单获取自身外网IP的方法
2016/09/18 Python
Python实现的rsa加密算法详解
2018/01/24 Python
Java实现的执行python脚本工具类示例【使用jython.jar】
2018/03/29 Python
python使用Flask操作mysql实现登录功能
2018/05/14 Python
Python的argparse库使用详解
2018/10/09 Python
在Pycharm中执行scrapy命令的方法
2019/01/16 Python
Python ConfigParser模块的使用示例
2020/10/12 Python
CSS3的颜色渐变效果的示例代码
2017/09/29 HTML / CSS
超30万乐谱下载:Musicnotes.com
2016/09/24 全球购物
浅谈react路由传参的几种方式
2021/03/23 Javascript
邹越演讲观后感
2015/06/15 职场文书
有关水浒传的读书笔记
2015/06/25 职场文书
期中考试后的感想
2015/08/07 职场文书
Python实战之实现康威生命游戏
2021/04/26 Python
SpringBoot SpringEL表达式的使用
2021/07/25 Java/Android
速龙x4-860k处理器相当于i几
2022/04/20 数码科技
mysql通过group by分组取最大时间对应数据的两种有效方法
2022/09/23 MySQL