简易模板字符串的使用

简易模板字符串的使用

当后端返回了这样的结果

const res = {
	head: {
		errCode: 0
	},
	data: {
    	message: '请患者${patientName}到${roomName}就诊！',
    	params: {
			patientName: '张三',
			roomName: '一诊室'
		}
	}
}

前端如何处理？

1. 打电话给后端同学，让他来处理，给我们前端返回拼接好的字符串。
2. 自己动手，丰衣足食。

显然我选择了后者。
其实也很简单，回忆回忆正则的贪婪匹配和非贪婪匹配（突然想到贪玩蓝月，我是渣渣辉，是兄弟就来砍我…
回到主题…
这里我们需要匹配字符串中的${xxx}，但是字符串中有多个这样的结构，那么需要用到非贪婪匹配。
尝试过程：

const obj = {
	patientName: '张三',
	roomName: '一诊室'
}
const str = '请患者${patientName}到${roomName}就诊！'
// 非贪婪模式，默认模式
const reg = /\$\{[\s\S]+}/g
// 贪婪模式，只是在最小单位后边加上一个?
const reg2 = /\$\{[\s\S]+?}/g
// 再查一查replace的用法
const str2 = str.replace(reg2, v => obj[v.slice(2, -1)])
console.log(str2) // 请患者张三到一诊室就诊！

达到目的了

你以为这样就完了吗？

并没有…

在自己的小库里加一个方法吧，日后用得着！

/**
 * 解析字符串模板
 * str 要解析的字符串 例如 ${a}aa${b}bb
 * valueObj 值对象 例如 {a: 'A', b: 'B'}
 * return 生成的字符串 例如 AaaBbb
 **/
function replaceVar(str, valueObj) {
	return str.replace(/\$\{[\s\S]+?}/g, v => valueObj[v.slice(2, -1)])
}

坚持不一定有好的结果，但是不坚持肯定不会有～
共勉～

===============================================分割线
有一个新需求
模板显示的时候需要吧变量部分高亮…
那就替换一下吧

function replaceVarWithHighlight(str, valueObj) {
	return str.replace(/\$\{[\s\S]+?}/g, v => `<span class="highlight">${v}</span>`)
}