首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >ES6字符串模板多行清除行头空格制表符

ES6字符串模板多行清除行头空格制表符

作者头像
CRPER
发布于 2019-11-29 02:06:26
发布于 2019-11-29 02:06:26
1.1K00
代码可运行
举报
文章被收录于专栏:CRPER折腾记CRPER折腾记
运行总次数:0
代码可运行

前言

最近在撸项目工程化的时侯,需要输出一些文案提示,

对于多行文本我肯定优先考虑用 ES6字符串模板来实现,直接使用的效果并不是很符合想要的。

因为字符串模板会默认保留你换行的格式,包括缩进这些。

效果图

ES6 String Template(raw)

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
let outMsg = `
${override ? "正在" : "文件不存在,开始"}生成文件${fileName}..
文件路径: ${colors.yellow(filePath)}
继续执行构建-->`;
console.log(outMsg);
复制代码

正则改造下

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
let outMsg = `
${override ? "正在" : "文件不存在,开始"}生成文件${fileName}..
文件路径: ${colors.yellow(filePath)}
继续执行构建-->`.replace(/^\s+/gm, "");
console.log(colors.green(outMsg));
复制代码

解决姿势

传统的字符串拼接

这种虽然可以对齐的,但是写起来不舒服, 所以我选择了正则来处理

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
let a='fads\n'
a+='rewr\n';
复制代码

正则方法

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
/**
 *
 * @param {string} strTemplate - ES6字符串模板多行
 * @returns {string}
 * @description - 返回去除行头空格的字符串
 */
function removeMultipleStrLeadingSpace(strTemplate) {
  if (!strTemplate) {
    return "";
  }
  return strTemplate.replace(/^\s+/gm, "");
}

module.exports = removeMultipleStrLeadingSpace;
复制代码
正则匹配范围测试

总结

有这个函数基本可以让我写多行文案舒服一些了,有改进的方案或者不对之处请留言,谢谢阅读

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2019年11月28日,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
ES6字符串模板多行清除行头空格制表符
对于多行文本我肯定优先考虑用 ES6字符串模板来实现,直接使用的效果并不是很符合想要的。
CRPER
2024/02/01
2200
ES6字符串模板多行清除行头空格制表符
ES6 系列之模板字符串
模板字符串支持嵌入变量,只需要将变量名写在 ${} 之中,其实不止变量,任意的 JavaScript 表达式都是可以的:
夜尽天明
2019/07/10
1.9K0
ES6 系列之模板字符串
es6模板字符串_es6字符串模板
在ES6(ES2015)中引入,另外,它还可以具有多行文本,换句话说可以直接输出回车换行符。
全栈程序员站长
2022/09/24
1.2K0
es6模板字符串_es6字符串模板
es6 模板字符串_es6 方法模板渲染
ES6(ES2015)为 JavaScript 引入了许多新特性,其中与字符串处理相关的一个新特性——模板字面量,提供了多行字符串、字符串模板的功能,相信很多人已经在使用了。字符串模板的基本使用很简单,今天就带大家来了解了解模板字符串。
全栈程序员站长
2022/09/24
6950
es6 模板字符串_es6 方法模板渲染
es6字符串的方法_es6模板字符串
模板字符串(template string)也就是模板字面量,是增强版的字符串,用反引号(`)来表示。它既可以当作普通字符串来使用,也可以在字符串中嵌套变量。
全栈程序员站长
2022/09/24
3710
es6字符串的方法_es6模板字符串
ES6模板字符串详细介绍
这种方式,经常会有引号、加号多或者少的问题出现。写法相当繁琐不方便,ES6 引入了模板字符串解决这个问题:
Javanx
2019/09/04
6450
ES6模板字符串详细介绍
ES6模板字符串详解
ES6是JavaScript语言的一次重大更新,引入了许多新特性和语法改进,其中模板字符串是一个非常实用和灵活的语法特性。它可以让我们从数组或对象中提取值,并赋给对应的变量,让代码变得更加简洁和易读。 本文将深入探讨ES6解构赋值的语法、用法及其在实际开发中的应用。
修己xj
2024/07/04
2540
ES6模板字符串详解
ES6模板字符串
ES6(ECMAScript 2015)引入了模板字符串,它是一种更强大、更灵活的字符串表示方式。模板字符串允许在字符串中嵌入表达式、变量和换行符,并支持多行字符串的定义。
堕落飞鸟
2023/05/22
5750
【ES6基础】模板字符串(Template String)
模板字符串是ES6中非常重要的一个新特性,这个特性使得我们处理相关业务变得更加容易。比如在处理嵌入表达式、多行字符串、字符串中插入变量、字符串格式化等方面的应用。模板字符串使用反钩号(backticks,`),而不是单引号或双引号。以下是个简单的示例:
前端达人
2019/04/18
6.8K0
【ES6基础】模板字符串(Template String)
【ES6基础】模板字符串(Template String)
模板字符串是ES6中非常重要的一个新特性,这个特性使得我们处理相关业务变得更加容易。比如在处理嵌入表达式、多行字符串、字符串中插入变量、字符串格式化等方面的应用。模板字符串使用反钩号(backticks,`),而不是单引号或双引号。以下是个简单的示例:
前端达人
2019/05/06
5790
【ES6基础】模板字符串(Template String)
ES6模板字符串`的引用
传统的 JavaScript 语言,输出模板通常是这样写的(下面使用了 jQuery 的方法)。
全栈程序员站长
2022/09/24
5680
ES6之字符串扩展
ES6对字符串扩展了一些功能,开发过程用到的不多,还有一些是Unicode的,这边就不仔细说那些,简单提一下ES6对字符串扩展了哪些。
wade
2020/04/24
2930
深入浅出ES6(四):模板字符串
在上一篇文章中,我说过要写一篇风格迥异的新文章,在了解了迭代器和生成器后,是时候来品味一些不烧脑的简单知识,如果你们觉得太难了,还不快去啃犀牛书!
全栈程序员站长
2022/07/22
3K0
ES6折腾记- 模板字符串
总体来说,模板字符串的出现了,让我们的字符串拼接写的更加优美了;相当简易实用;但是这货并不是万能的,有部分unicode编码字符会造成编译报错
CRPER
2018/08/28
6850
javascript的replace+正则 实现ES6的字符串模版
版权声明:本文为吴孔云博客原创文章,转载请注明出处并带上链接,谢谢。 https://blog.csdn.net/wkyseo/article/details/51458991
空空云
2018/09/27
5530
面试中常考的字符串操作方法大全,包含ES6
对于JavaScript字符串操作方法,你真的全部掌握了吗?来看看这篇面试中常考的字符串操作大全,包含最新的ES6字符串操作方法,值得收藏哦。
Javanx
2019/09/04
6630
JavaScript ES6 模板字符串
偶然发现这个新东西,ES6也有模板了,是使用反引号`,来表示的。 这个新东西被称为字符串字面量,就是模板字符串。它使JS也有了简单的字符串插值特性。 为什么说是简单呢,因为因为它不能不能自动转义特殊字符,不能处理特殊语言格式的日期、时间什么的,也没有循环,, 所以它现在只是一个处理输出字符串的东西,目前无法替代模板引擎。 它的用法很简单,这样: console.log( `我是 $(json.name)` ); 这个$(json.name)就是模板占位符,JS会把相应的值,输出安插在一对反引号``中,对应的
web前端教室
2018/02/06
9900
Web前端模板引擎之字符串模板
进入正文之前,我们先回顾一下在模板引擎出现之前,暂且称之为“石器时代”,我们是如何利用JS改变页面结构的。对于下面的代码:
Dickensl
2022/06/14
1.6K0
Web前端模板引擎之字符串模板
ES6--模板字符串
ES6中的模板字符串(template string)是增强版的字符串,用反引号(`)标识。它可以当作普通字符串使用,也可以用来定义多行字符串,或者在字符串中嵌入变量。
软件架构师Michael
2022/09/17
3850
JS手撕(六) trim、模板字符串、千分位分隔符
核心就是/^\s+|\s+$/这一段正则表达式,它会匹配字符串前后的空格,然后通过replace()把匹配到的部分替换成空串。
赤蓝紫
2023/01/01
1.6K0
相关推荐
ES6字符串模板多行清除行头空格制表符
更多 >
交个朋友
加入腾讯云官网粉丝站
蹲全网底价单品 享第一手活动信息
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档