如何從含有占位符的字符串生成一個ReactNode數組

最近項目中有這樣的需求，就是將含有占位符的字符串轉成下面的樣子，假設要渲染的字符串是${}沒搶到，表示很失望，最終要渲染成下面的樣子：

假設${}要被替換成<Tag />元素，那么最終應該返回的是:

[<Tag />, '沒搶到，表示很失望']

分析

這里再使用string.prototype.replace就行不通了，因為這個方法返回的是一個字符串，我們需要的是一個ReactNode數組。那么我們很容易想到，先把字符串split，然后再把 插進去：

const strArr = '${}沒搶到，表示很失望'.split('${}');
const result = [];
for (let i = 0; i < strArr.length; i++) {
	result.push(strArr[i], <Tag/>)
}
result.pop();
console.log(result);

不使用for循環

前面的方法，我們替換掉了思路是在占位符前后切開字符串之后，從而保留了占位符，然后再使用map進行替換：

'${}123${}456xxx${}999'.
replace(/\$\{\}/g, '#@${}#@') // #@代表占位符的邊界
.split('#@') // 以邊界進行分割
.map(str => {
    if (str === '${}') {
        return <Tag />
    }
    return str
})

reduce 法

上面的方法中，進行了全局的replace和split，最后再map，導致復雜度大大提升，下面的reduce方法就更好一點

'${}123${}456xxx${}999'.split('${}').reduce((prev, curr, idx, arr) => {
    if (idx !== arr.length - 1) {
        prev.push(curr, '<div />');
    } else {
        prev.push(curr);
    }
    return prev;
}, []);