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

前言

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

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

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

效果图

ES6 String Template(raw)

代码语言：javascript复制

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

正则改造下

代码语言：javascript复制

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

解决姿势

传统的字符串拼接

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

代码语言：javascript复制

let a='fadsn'
a ='rewrn';

正则方法

代码语言：javascript复制

/**
 *
 * @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(/^[ &emsp;] /gm, '');
  }
  return strTemplate.replace(/^s /gm, '');
}

module.exports = removeMultipleStrLeadingSpace;

正则匹配范围测试

改进方案

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

s ：等同于 [rntfv ]

总结

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

工程化函数数据字符串测试

0 人点赞