JavaScript：如何用if语句判断句子中是否包含指定单词？

我编写的代码：

$(function() { 
    $.getJSON('test.json', function(data) { 
        var items = []; 
        $.each( data.products, function( key, val ) { 
            for (var i = 0; i < data.products.length; i++) { 
                var obj = data.products[i]; 
                if (obj.title == 'Hat') { 
                    var Imgs = '<div class="Hats"><img src="' + obj.imUrl + '"></div>' 
                    $(Imgs).appendTo($(".HatsImages")); 
                } 
            } 
        });
    })
})

需要实现的逻辑是：当obj.title（实际值为'Plain Black Adjustable Hat'）中包含单词'Hat'时，执行图片追加操作，但当前代码的判断方式无法满足需求，请问该如何修改？

嗨，我看了你的代码，问题主要有两个：精确匹配的判断逻辑不符合需求，还有完全冗余的循环嵌套，咱们一步步改：

1. 修正 Substring 包含判断逻辑 #

你现在用的obj.title == 'Hat'是精确匹配，只有当title完全等于'Hat'时才会触发，但你的实际title是带前缀的长字符串，所以得改成判断字符串是否包含指定子串：

• 现代浏览器推荐用String.prototype.includes()，语法简洁直观：

  val.title.includes('Hat')
  

• 如果需要兼容IE这类旧浏览器，用indexOf()做兼容：

  val.title.indexOf('Hat') !== -1
  

• 要是想忽略大小写（比如匹配'hAt'、'HAT'也生效），可以统一转成小写后判断：

  val.title.toLowerCase().includes('hat')
  

2. 移除冗余的循环嵌套 #

你现在在$.each(data.products)里面又套了一层for循环——这相当于把整个products数组遍历了n²次（n是数组长度），完全没必要！$.each已经在逐个遍历products里的元素了，直接用回调里的val就能拿到当前的产品对象，不用再重新循环一次。

修改后的完整代码 #

$(function() { 
    $.getJSON('test.json', function(data) { 
        // 直接用$.each遍历products数组，不需要额外的for循环
        $.each(data.products, function(key, val) { 
            // 判断title是否包含'Hat'（这里用了忽略大小写的写法，按需调整）
            if (val.title.toLowerCase().includes('hat')) { 
                var Imgs = '<div class="Hats"><img src="' + val.imUrl + '"></div>';
                $(Imgs).appendTo($(".HatsImages")); 
            } 
        });
    })
})

额外小优化（可选） #

如果你的products数组很大，还可以先过滤出符合条件的元素，再统一处理，代码可读性更好：

$(function() { 
    $.getJSON('test.json', function(data) { 
        // 先过滤出包含'Hat'的产品
        const hatProducts = data.products.filter(product => 
            product.title.toLowerCase().includes('hat')
        );
        // 再批量追加图片
        hatProducts.forEach(product => {
            const imgDiv = `<div class="Hats"><img src="${product.imUrl}"></div>`;
            $(imgDiv).appendTo($(".HatsImages"));
        });
    })
})

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