专业游戏门户,分享手游网游单机游戏百科知识攻略!

嗨游网
嗨游网

详解JavaScript中的padStart()和padEnd()方法

来源:小嗨整编  作者:小嗨  发布时间:2024-03-19 07:57
摘要:ES2017引入了字符串补全长度的功能。如果某个字符串不够指定长度,会在头部或尾部补全。padStart()用于头部补全,padEnd()用于尾部补全。conststring=histring.padStart(3,c)//...

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

详解JavaScript中的padStart()和padEnd()方法

const string = 'hi';string.padStart(3, 'c'); // "chi"string.padEnd(4, 'l'); // "hill"
登录后复制

这里有一个有趣的例子,如果你强制把 undefined 转成一个字符串,得到一个TypeError:

undefined.toString(); // TypeError: Cannot read property 'toString' of undefined
登录后复制

但当我们把undefined作为第二个参数传入padStart,会得到这个:

'SAM'.padStart(10, undefined);// '       SAM'
登录后复制

所以上面说的 padString 参数会使用 toString 强制转成字符串使用,到这里感觉又不对了 ??。我们先来看下规范:

ECMAScript 规范 :如果填充的字符串是 undefined,该填充的字符串就会被规制成空格( 0x0020)。

好吧,我们更正一下, 除了undefined,否则传递的所有其他数据类型都将使用toString强制转成字符串。

如果 padString 超过 maxLength 怎么办?

如果 maxLength 数值小于等于当前字符串的长度,则返回当前字符串本身。

'hi'.padEnd(2, 'SAM');// 'hi'
登录后复制

如果 maxLength 小于 padString 的长度,则 padString 会被截断。

'hi'.padEnd(7, 'SAMANTHA');// 'hiSAMAN'
登录后复制padStart/padEnd vs padLeft/padRight

trim 方法具有的别名。

trimLefttrimStart的别名trimRighttrimStart的别名

但是对于字符串填充方法,没有别名。 因此,请勿使用padLeftpadRight,它们不存在。 这也是建议你不要使用trim别名的原因,这样让代码库中具有一致性 ??

实战用事

使用 padStart 让字符串右对齐

console.log('JavaScript'.padStart(15));console.log('HTML'.padStart(15));console.log('CSS'.padStart(15));console.log('Vue'.padStart(15));
登录后复制

得到的结果

     JavaScript           HTML            CSS            Vue
登录后复制

数字打码

const bankNumber = '2222 2222 2222 2222';const last4Digits = bankNumber.slice(-4);last4Digits.padStart(bankNumber.length, '*');// ***************2222
登录后复制浏览器支持

padStartpadEnd是同时引入的,因此它们共享相似的浏览器支持, 除了 IE 之外,都 可以用 ??

原文地址:dmitripavlutin/replace-all-string-occurrences-javascript/

作者: Dmitri Pavlutin

译文地址:segmentfault/a/1190000023721944

更多编程相关知识,请访问:编程入门!!

以上就是详解JavaScript中的padStart()和padEnd()方法的详细内容,更多请关注易企推科技其它相关文章!


本文地址:网络百科频道 https://www.eeeoo.cn/wangluo/1150610.html,嗨游网一个专业手游免费下载攻略知识分享平台,本站部分内容来自网络分享,不对内容负责,如有涉及到您的权益,请联系我们删除,谢谢!


网络百科
小编:小嗨整编
相关文章相关阅读
  • 文件夹怎么设置密码(文件夹加密最简单的方法)?

    文件夹怎么设置密码(文件夹加密最简单的方法)?

    文件夹怎么设置密码(文件夹加密最简单的方法)?为了避免他人查看,为文件夹设置密码是一种简单有效的保护措施。本文将为您介绍一种最简单的文件夹加密方法,让您轻松实现文件夹的密码保护。文件夹怎么设置密码一、使用压缩软件加密文件夹1.在电脑上安装一...

  • 电脑如何设置密码锁屏(电脑如何设置密码的方法)?

    电脑如何设置密码锁屏(电脑如何设置密码的方法)?

    电脑如何设置密码锁屏(电脑如何设置密码的方法)?随着电脑在日常生活中的普及,个人信息的安全性越来越受到重视。设置密码锁屏是保护电脑隐私的有效方法。本文将为您详细介绍如何在电脑上设置密码锁屏,帮助您轻松实现电脑安全防护。一、Windows系统...

  • dnf黑屏进不去游戏怎么办(dnf黑屏解决方法)?

    dnf黑屏进不去游戏怎么办(dnf黑屏解决方法)?

    dnf黑屏进不去游戏怎么办(dnf黑屏解决方法)?在玩dnf时,你是否遇到过黑屏进不去游戏的情况?这个问题让很多玩家都头疼不已。下面,我将为大家详细介绍dnf黑屏的解决方法。dnf黑屏进不去游戏什么原因1.网络延迟过大:当网络延迟较高时,游...

  • javascript教程网(javascript教程推荐)

    javascript教程网(javascript教程推荐)

    javascript教程网(javascript教程推荐)JavaScript作为一种广泛应用于网页开发的技术,已经成为前端开发不可或缺的一部分。对于刚接触编程的菜鸟来说,选择一份合适的JavaScript教程至关重要。本文将为您推荐几款优...

  • oppo手机忘记密码了怎么解锁(oppo手机强制解锁方法)?

    oppo手机忘记密码了怎么解锁(oppo手机强制解锁方法)?

    oppo手机忘记密码了怎么解锁(oppo手机强制解锁方法)?现代社会,手机已经成为我们日常生活中不可或缺的伙伴。然而,有时候我们会遇到忘记手机解锁密码的尴尬情况,尤其是Oppo手机用户。忘记密码会导致手机无法正常使用,也无法进入系统查看资料...

  • 油管官方app下载方法(油管app正版下载)

    油管官方app下载方法(油管app正版下载)

    油管官方app下载方法(油管app正版下载)油管(YouTube)逐渐成为了国内外视频爱好者们不可或缺的短视频平台。为了让大家更方便地观看和上传视频,油管推出了官方App。那么,如何正确下载油管官方App,正版享受高品质视频体验呢?第一步:...

  • cad2014安装教程图解及激活方法(cad2014安装教程全过程)

    cad2014安装教程图解及激活方法(cad2014安装教程全过程)

    cad2014安装教程图解及激活方法(cad2014安装教程全过程)摘要:本文详细介绍了cad2014的安装过程及激活方法,通过图文并茂的方式,让读者轻松掌握安装与激活步骤。cad2014安装教程图解及激活方法1、下载到安装包,并将其解压出...

  • 梦幻西游科举答题器使用方法(梦幻西游科举答题器答案)

    梦幻西游科举答题器使用方法(梦幻西游科举答题器答案)

    梦幻西游科举答题器使用方法(梦幻西游科举答题器答案)梦幻西游科举答题器可以帮助玩家们轻松应对科举考试,获取丰厚奖励。下面,我将为大家详细讲解答题器的使用方法以及梦幻西游科举最新答案。梦幻西游科举答题器使用方法1.在浏览器中搜索“梦幻西游科举...

  • 周排行
  • 月排行
  • 年排行

精彩推荐