拆分空Data数据却得到非空结果的技术问题咨询

你遇到的问题核心在于空字符串调用split()方法的特殊行为：当$('.imgactive').data('tags')是空值（实际是空字符串）时，执行split('***')会返回一个包含单个空字符串的数组[""]，而非你预期的空数组[]。这就导致forEach会遍历这个数组一次，最终创建出一个内容为空的<div class='tagup'></div>。

另外还要注意你原代码里的el.trim();没有赋值给变量，这行代码其实不会改变el的实际内容，相当于无效操作。

下面提供两种可行的解决思路，都能让#tagsup在data('tags')为空时保持空状态：

方案1：提前判断数据有效性 #

在执行拆分操作前，先检查data('tags')是否为非空字符串，只有满足条件时才进行后续处理：

console.log($('.imgactive').data('tags')); // empty
$('#tagsup').html(""); 
var tagsData = $('.imgactive').data('tags');
// 先判断数据是否存在且不为空字符串
if (tagsData && tagsData.trim() !== '') {
  var arr = tagsData.split('***'); 
  arr.forEach(function(el) { 
    var trimmedEl = el.trim();
    // 额外确保单个标签内容不为空
    if (trimmedEl) {
      var ob = $("<div class='tagup'>" + trimmedEl + "</div>"); 
      ob.appendTo('#tagsup'); 
    }
  }); 
}
console.log($('#tagsup').html()); 

方案2：过滤拆分后的空元素 #

先执行拆分，再通过map和filter处理数组，去掉空元素后再遍历：

console.log($('.imgactive').data('tags')); // empty
$('#tagsup').html(""); 
var arr = $('.imgactive').data('tags').split('***')
  .map(el => el.trim()) // 去除每个元素的前后空格
  .filter(el => el !== ''); // 过滤掉空字符串元素
arr.forEach(function(el) { 
  var ob = $("<div class='tagup'>" + el + "</div>"); 
  ob.appendTo('#tagsup'); 
}); 
console.log($('#tagsup').html()); 

内容的提问来源于stack exchange，提问作者qadenza