jQuery中if语句字符串比较不符合预期问题求助

作为经常处理这类问题的开发者，我帮你梳理下这段代码里最可能的几个问题，都是实际项目里高频出现的：

1. 文本带了看不见的空白字符 #

这绝对是排名第一的原因！.text()会把元素里所有的文本内容（包括换行、空格、制表符甚至页面缩进）都捞出来，哪怕页面上显示的是干干净净的Sandwich，实际拿到的可能是" Sandwich "或者"Sandwich\n"这种带空白的字符串，直接用===自然匹配不上。

你可以先在控制台打印变量的时候加个包裹，一眼就能看出有没有空白：

console.log('|' + style + '|'); // 用竖线包裹，前后的空白一目了然

解决起来也简单，用jQuery的$.trim()方法（1.9.1版本完全支持）去掉首尾空白：

var style = $.trim($('.user-profiles .custom-field-profileboxstyle td:last-of-type').text());

2. 选择器没匹配到目标元素 #

你得先确认$('.user-profiles .custom-field-profileboxstyle td:last-of-type')真的选中了想要的元素——说不定是类名拼写错误，或者td:last-of-type的父元素不是你预期的表格，导致选择器返回空集合，.text()就会得到空字符串，自然没法和'Sandwich'相等。

验证方式很简单，在控制台打印选中的元素数量：

console.log($('.user-profiles .custom-field-profileboxstyle td:last-of-type').length);

如果输出是0，说明选择器完全没匹配到元素，得先修正选择器写法。

3. 代码执行时机不对 #

如果你的代码是在DOM还没加载完成的时候执行的，那$('.user-profiles ...')根本找不到目标元素，同样会得到空字符串。

解决办法是把代码放在$(document).ready()里，确保DOM完全加载后再执行逻辑：

$(document).ready(function() {
    var style = $.trim($('.user-profiles .custom-field-profileboxstyle td:last-of-type').text());
    if (style === 'Sandwich') {
        $('.user-profiles').append("I am a sandwich.");
    }
});

4. 文本藏了特殊不可见字符 #

有时候页面上的文本看起来是Sandwich，但可能包含全角空格、零宽度空格这类肉眼看不到的特殊字符，这时候直接用===比较也会失败。

可以用charCodeAt()逐个检查字符编码，排查异常：

for(var i=0; i<style.length; i++){
    console.log(style[i], style.charCodeAt(i));
}

如果发现奇怪的编码，就用正则清理掉这些特殊字符：

var style = $('.user-profiles .custom-field-profileboxstyle td:last-of-type').text().replace(/[\s\u200B\uFEFF]/g, '');

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