es6模板字符串中循环遍历数据踩坑

应该很少有这种需求，需要在模板字符串利循环遍历数据，现在框架都有自己模板语法。

我这里踩的坑是，我在模板字符串中用forEach,map遍历循环时，返回值一直是一个undefined
用for循环return之后当条件满足时又直接跳出循环了

有大佬看到这里知道的希望能帮帮忙解答一下

代码如下：
for循环

 这是在模板字符串中用for循环遍历
 this.goodsData = [
 {type: '自闭阀', userName: 'zs', userCode: '123'},
 {type: '波纹管', userName: 'zs2', userCode: '142'},
 {type: '报警器', userName: 'zsw', userCode: '172'},
 {type: '表头', userName: 'zsf', userCode: '172'},
 {type: '金属头', userName: 'zsd', userCode: '132'}
 ]
			`
            <div class="install-situation">
              安装情况
            </div>
              ${
                (() => {
                    for (let i = 0; i < this.goodsData.length; i++) {
                      let item = this.goodsData[i];
                      if(item.type == '自闭阀') {
                        return `
                          <div class="install-item">
                            <div class="install-item-frist">${ item.type }</div>
                            <div class="install-item-isright">
                              <div class="install-item-top">是否正常安装</div>
                              <div class="install-item-bottom"></div>
                            </div>
                            <div class="install-item-common">
                              <div class="install-item-top">品牌名称</div>
                              <div class="install-item-bottom">${ item.userName || ''}</div>
                            </div>
                            <div class="install-item-common">
                              <div class="install-item-top">规格型号</div>
                              <div class="install-item-bottom">${ item.model || ''}</div>
                            </div>
                       
                            <div style="display: flex; flex: 6;">
                              <div class="install-item-address">
                                <div class="install-item-top">备注(双螺/一螺一插)</div>
                                <div class="install-item-bottom"></div>
                              </div>
                              <div class="install-item-address-no-border">
                                <div class="install-item-top">是否进行使用培训</div>
                                <div class="install-item-bottom"></div>
                              </div>
                            </div>
                          </div>
                        `
                      }else if (item.type == '波纹管') {
                        return `
                          <div class="install-item">
                            <div class="install-item-frist">${ item.type }</div>
                            <div class="install-item-isright">
                              <div class="install-item-top">是否正常安装</div>
                              <div class="install-item-bottom"></div>
                            </div>
                            <div class="install-item-common">
                              <div class="install-item-top">品牌名称</div>
                              <div class="install-item-bottom">${ item.userName || ''}</div>
                            </div>
                            <div class="install-item-common">
                              <div class="install-item-top">规格型号</div>
                              <div class="install-item-bottom">${ item.model || ''}</div>
                            </div>
                          
                            <div style="display: flex;  flex: 6;">
                              <div class="install-item-address">
                                <div class="install-item-top">备注(双螺/一螺一插)</div>
                                <div class="install-item-bottom"></div>
                              </div>
                              <div class="install-item-address-no-border">
                                <div class="install-item-top">未安装原因</div>
                                <div class="install-item-bottom"></div>
                              </div>
                            </div>
                          </div>
                        `
                      }else {
                        return `
                          <div class="install-item">
                            <div class="install-item-frist">${ item.type }</div>
                            <div class="install-item-isright">
                              <div class="install-item-top">是否正常安装</div>
                              <div class="install-item-bottom"></div>
                            </div>
                            <div class="install-item-common">
                              <div class="install-item-top">品牌名称</div>
                              <div class="install-item-bottom">${ item.userName || ''}</div>
                            </div>
                            <div class="install-item-common">
                              <div class="install-item-top">规格型号</div>
                              <div class="install-item-bottom">${ item.model || ''}</div>
                            </div>
                            <div style="display: flex;  flex: 6;">
                              <div class="install-item-address">
                                <div class="install-item-top">安装位置</div>
                                <div class="install-item-bottom"></div>
                              </div>
                              <div class="install-item-common">
                                <div class="install-item-top">通电情况</div>
                                <div class="install-item-bottom"></div>
                              </div>
                              <div class="install-item-end">
                                <div class="install-item-top">报警测试情况</div>
                                <div class="install-item-bottom"></div>
                              </div>
                            </div>
                        </div>
                        `
                      }
                    }
                })()
              }
              `

我用for循环时条件满足就跳出循环了 导致只能渲染一条数据出来如图：

期望是这样的：

可是当我用forEach或者map时 ，直接给我返回一个undefind
不说完整逻辑， 就下面这一点，我在模板字符串中写也是给我返回undefind

this.goodsData.forEach((item) => {
	return '哈哈哈哈或'
})

在此记录一下这个坑
难道模板字符串中不支持forEach,map等之类的遍历吗