23-march8th

模版字符串原理

之前我们都是使用字符串拼接的方式来写，这样稍不注意就会写错，

es6新出了模版字符串 ，以 ``的形式，

其中可以以${}的方式动态表示变量。

// 模版字符串
let name="张三",age="18";
let str=`${name} 今年  ${age}  岁了`

原理

let name = "若薇";
let age = 18;
let str = "${name}今年${age}岁了";

function muban(str) {
  let regex = /\$\{([^}]+)\}/g; // ||  /\$\{(.+?)\}/g
  return str.replace(regex, function (match, key, c, d) {
    return eval(key);// eval() 函数会将传入的字符串当做 JavaScript 代码进行执行。例如： eval('name') // 名字
  });
}
/**
* replace 方法的第二个参数可以是一个函数，函数的返回值是要替换的对象
* @{param} match : 匹配到的字符串（ ${name}）
* @{param} key : 对应替换的字符串 (name)
* @{param} c : 替换的位置 || 偏移量
* @{param} d : 被替换的对象，str本身
* 总结： 模版字符串其实就是把 ${} 取出来，然后赋值。
*/

console.log("muban(str)", muban(str)); // 若薇今年18岁了

参考资料

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/String/replace#%E6%8C%87%E5%AE%9A%E4%B8%80%E4%B8%AA%E5%87%BD%E6%95%B0%E4%BD%9C%E4%B8%BA%E5%8F%82%E6%95%B0

https://blog.csdn.net/qq_40028324/article/details/116492586

https://www.jianshu.com/p/e78a1e25f02b

解决重渲后歌曲当前播放时间置为0问题

      
      // 重渲原因： 鼠标晃动、单击底部播放组件，这样的操作为什么重渲，暂时不知
      // 保存上一次的有效currentTime信息
      // 在状态为播放且 currentTime 因重渲重置为零的情况下 恢复之前的 currentTime
      useEffect(() => {
        if (musicRef.current) {
          const { currentTime } = musicRef.current;
          // 只保存不为零的 有效值，因为会触发多次，重置为0前一定能存到最近的(不为0)值
          if (currentTime) {
            localStorage.setItem("currentTime", currentTime);
          }

          if (
            play && // 当前为播放状态
            currentTime === 0 && // 且已经被重置
            Number(localStorage.getItem("currentTime")) // 且有保存的值
          ) {
            // 恢复因为重渲而变为0的 currentTime 并调用 play 重新开始播放
            musicRef.current.currentTime = Number(
              localStorage.getItem("currentTime")
            );
            musicRef.current.play();
            console.log("再赋值", musicRef.current.currentTime);
          }
        }
        return () => {
          removeEventListener("load", listenFunc);
        };
      });

react 歌词滚动

  useMemo(() => {
    
    // 根据时间 time 变量 反复重渲
    const timeArr: any = [];
    const lrcArr: any = [];
    const regex = /\[(\d{2}:\d{2})\.\d{2,3}\](.+)/g;
 
    let tmp = regex.exec(lyric);

    while (tmp) {
      timeArr.push(tmp[1]);
      lrcArr.push(tmp[2]);
      tmp = regex.exec(lyric);
    }

    setLrc(lrcArr);
    const index = timeArr.findIndex((item: any) => {
      return item === time;
    });
   
    const div = document.getElementById("lyricdiv");

    if (index !== -1 && div) {                  // 15 为容器高的一半
      div.style.top = -index * 3.5 + 15 + "rem"; // 3.5 为每一个li的高（2rem）+ 每个li的margin-bottom(1.5rem)
      [...div.children].forEach((item) => {
        if (item) {
          item.className = "";
        }
      });
      if (div.children[index]) {
        div.children[index].className = "active";
      }
    }
    
  }, [lyric, time]);

  <Lyric>
    <ul id="lyricdiv">
      {lrc.map((item: any, index: number) => (
        <li key={index}>{item}</li>
      ))}
    </ul>
  </Lyric>

const Lyric = styled.div`
  width: calc(100% - 30rem);
  overflow-y: auto;
  position: relative;
  font-size: 1.4rem;
  text-align: center;
  
  ul {
    width: 100%;
    position: absolute;
    top: 15rem;

    li {
      margin-bottom: 1.5rem;
      height: 2rem;
      list-style: none;
      width: 100%;
      line-height: 2rem;
    }
  }
`;