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

简介: 最近在撸项目工程化的时侯,需要输出一些文案提示,对于多行文本我肯定优先考虑用 ES6字符串模板来实现,直接使用的效果并不是很符合想要的。因为字符串模板会默认保留你换行的格式,包括缩进这些。


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


前言


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

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


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

效果图


ES6 String Template(raw)



let outMsg = `
${override ? "正在" : "文件不存在,开始"}生成文件${fileName}..
文件路径: ${colors.yellow(filePath)}
继续执行构建-->`;
console.log(outMsg);


正则改造下



let outMsg = `
${override ? "正在" : "文件不存在,开始"}生成文件${fileName}..
文件路径: ${colors.yellow(filePath)}
继续执行构建-->`.replace(/^\s+/gm, "");
console.log(colors.green(outMsg));


解决姿势


传统的字符串拼接


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


let a='fads\n'
a+='rewr\n';


正则方法


/**
 *
 * @param {string} strTemplate - ES6字符串模板多行
 * @param {boolean} onlyMatchSpace - 只匹配行前空格(中文空格和英文空格)
 * @returns {string} - 符合格式的字符串数据
 * @description - 返回去除行头空格的字符串
 */
function removeMultipleStrLeadingSpace (strTemplate, onlyMatchSpace = true) {
  if (!strTemplate) {
    return '';
  }
  if (onlyMatchSpace) {
    // eslint-disable-next-line no-irregular-whitespace
    return strTemplate.replace(/^[  ]+/gm, '');
  }
  return strTemplate.replace(/^\s+/gm, '');
}
module.exports = removeMultipleStrLeadingSpace;

正则匹配范围测试



改进方案


若是要考虑中文空格以及保留换行符,不能 \s 一撸到底,具体看函数

\s :等同于 [\r\n\t\f\v ]

目录
相关文章
|
前端开发 机器人 API
前端大模型入门(一):用 js+langchain 构建基于 LLM 的应用
本文介绍了大语言模型(LLM)的HTTP API流式调用机制及其在前端的实现方法。通过流式调用,服务器可以逐步发送生成的文本内容,前端则实时处理并展示这些数据块,从而提升用户体验和实时性。文章详细讲解了如何使用`fetch`发起流式请求、处理响应流数据、逐步更新界面、处理中断和错误,以及优化用户交互。流式调用特别适用于聊天机器人、搜索建议等应用场景,能够显著减少用户的等待时间,增强交互性。
3714 2
|
XML JSON JavaScript
【前端】Vue项目中 JSON 编辑器的使用
【前端】Vue项目中 JSON 编辑器的使用
4644 0
深入掌握ant-design的form异步校验(一)
本文适合对ant-design的表单校验感兴趣的小伙伴阅读~
|
人工智能 Rust 前端开发
前端界的未来趋势:掌握这些新技术,让你的作品走在时代前沿!
【10月更文挑战第30天】前端开发正以前所未有的速度发展,新技术层出不穷。本文探讨了AI助手(如GitHub Copilot)、低代码/无代码平台、跨平台技术(如React Native)和WebAssembly等未来主流技术,并附上示例代码,帮助你走在时代前沿。
533 1
|
JavaScript
JS中的splice的三种用法(删除,替换,插入)
JS中的splice的三种用法(删除,替换,插入)
1049 4
|
存储 JSON API
作为开发者,我如何提高任务型大模型应用的响应性能
本文基于实际场景,分享了作为开发者提高大模型响应性能的四个实用方法。
2310 57
|
存储 前端开发 JavaScript
Web前端主题色更换实现方式全解析(一)
Web前端主题色更换实现方式全解析(一)
389 1
|
JavaScript
蓝易云 - npm install报错问题解决合集
以上是一些常见的npm install错误及其解决方法,希望对你有所帮助。
382 0
|
缓存 资源调度 Rust
前端效率提升实践之路
在一个B端前端项目中,开发团队面临开发效率低、交付质量和可维护性差的问题。为了解决这些问题,他们以“提效”为主题,展开了项目治理。首先,他们优化了发布和编译过程,通过更换包管理工具、减少不必要的包、使用缓存策略等方法,显著缩短了发布和编译时间。其次,团队致力于沉淀可复用物料,创建了高度配置化的组件,通过VSCode插件助手自动化配置,提高了代码复用性和开发效率。此外,他们还改进了研发流程,制定了前端、后端和产品的规范,以减少沟通成本和提高接口质量。通过这些措施,团队成功提升了开发效率,并降低了代码维护成本。
509 3
前端效率提升实践之路
|
机器学习/深度学习 存储
进制及进制转换详解。原码、反码、移码,补码区别介绍。(通俗易懂)
Ⅰ.进制转换详解。Ⅱ.原码、反码、移码,补码区别介绍。(通俗易懂)
941 0
进制及进制转换详解。原码、反码、移码,补码区别介绍。(通俗易懂)