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 相关文章推荐
js 返回时间戳所对应的具体时间
Jul 20 Javascript
js创建子窗口并且回传值示例代码
Jul 02 Javascript
jQuery阻止事件冒泡具体实现
Oct 11 Javascript
分享几种比较简单实用的JavaScript tabel切换
Dec 31 Javascript
浅谈js构造函数的方法与原型prototype
Jul 04 Javascript
javascript中数组(Array)对象和字符串(String)对象的常用方法总结
Dec 15 Javascript
jQuery日期范围选择器附源码下载
May 23 jQuery
Vue2.x中的Render函数详解
May 30 Javascript
seajs中模块依赖的加载处理实例分析
Oct 10 Javascript
Vue开发之封装分页组件与使用示例
Apr 25 Javascript
解决layer.prompt无效的问题
Sep 24 Javascript
vue实现浏览器全屏展示功能
Nov 27 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
PHP 开源框架22个简单简介
2009/08/24 PHP
php汉字转拼音的示例
2014/02/27 PHP
php变量与数组相互转换的方法(extract与compact)
2016/12/02 PHP
PHP实现防盗链的方法分析
2017/07/25 PHP
使用CSS3实现字体颜色渐变的实现
2021/03/09 HTML / CSS
javascript 自动填写表单的实现方法
2010/04/09 Javascript
javascript倒计时功能实现代码
2012/06/07 Javascript
THREE.JS入门教程(3)着色器-下
2013/01/24 Javascript
原生JS操作网页给p元素添加onclick事件及表格隔行变色
2013/12/01 Javascript
jquery uploadify 在FF下无效的解决办法
2014/09/26 Javascript
浅谈javascript面向对象程序设计
2015/01/21 Javascript
使用mouse事件实现简单的鼠标经过特效
2015/01/30 Javascript
JS实现的自定义右键菜单实例二则
2015/09/01 Javascript
js正则表达式验证邮件地址
2015/11/12 Javascript
点击页面任何位置隐藏div的实现方法
2016/09/05 Javascript
了解javascript中变量及函数的提升
2019/05/27 Javascript
Vue.js实现可编辑的表格
2019/12/11 Javascript
Vue自定义render统一项目组弹框功能
2020/06/07 Javascript
[52:09]2014 DOTA2华西杯精英邀请赛 5 25 NewBee VS DK第二场
2014/05/26 DOTA
python 实现堆排序算法代码
2012/06/05 Python
Python中for循环详解
2014/01/17 Python
pymongo实现多结果进行多列排序的方法
2015/05/16 Python
Django打印出在数据库中执行的语句问题
2019/07/25 Python
使用Python 自动生成 Word 文档的教程
2020/02/13 Python
Django ORM filter() 的运用详解
2020/05/14 Python
keras实现图像预处理并生成一个generator的案例
2020/06/17 Python
Python Pivot table透视表使用方法解析
2020/09/11 Python
基于CSS3的animation属性实现微信拍一拍动画效果
2020/06/22 HTML / CSS
canvas实现手机的手势解锁的步骤详细
2020/03/16 HTML / CSS
Baby Tulai澳大利亚:美国婴儿背带品牌
2018/10/15 全球购物
Nip + Fab官网:英国美容品牌
2019/08/26 全球购物
PyQt QMainWindow的使用示例
2021/03/24 Python
公证委托书格式
2014/09/13 职场文书
小学毕业感言200字
2015/07/30 职场文书
学校学习型党组织建设心得体会
2019/06/21 职场文书
Windows Server 2012 修改远程默认端口3389的方法
2022/04/28 Servers