如何在JavaScript中拼接字符串与整数，生成无引号AGM地图属性？

问题场景 #

我当前使用JavaScript拼接字符串生成AGM地图标签，代码为：

"<agm-map latitude=" + response.latitude + " longitude=" + response.longitude + "></agm-map>"

生成结果为 <agm-map [latitude]="51.678418" [longitude]="7.809007"></agm-map>，但我需要生成不带引号的格式，即 <agm-map [latitude]=51.678418 [longitude]=7.809007></agm-map>，恳请各位提供解决方法。

解决方案 #

其实很简单，只需要调整你的字符串拼接逻辑，确保数值直接插入而不被引号包裹：

1. 基础字符串拼接修改

先把属性名改成你需要的[latitude]和[longitude]，然后直接拼接数值（不需要额外添加引号）：

"<agm-map [latitude]=" + response.latitude + " [longitude]=" + response.longitude + "></agm-map>"

只要response.latitude和response.longitude是数值类型，这段代码就会生成你想要的无引号格式。

2. 用ES6模板字符串更简洁

模板字符串能让代码可读性更高，避免繁琐的+拼接：

`<agm-map [latitude]=${response.latitude} [longitude]=${response.longitude}></agm-map>`

模板字符串会直接将变量的数值插入到对应位置，同样不会添加引号。

3. 处理字符串类型的坐标

如果接口返回的latitude和longitude是字符串类型的数值（比如"51.678418"），直接拼接会导致引号保留，这时候需要先转成数值类型：

// 基础拼接写法
"<agm-map [latitude]=" + Number(response.latitude) + " [longitude]=" + Number(response.longitude) + "></agm-map>"

// 模板字符串写法
`<agm-map [latitude]=${Number(response.latitude)} [longitude]=${Number(response.longitude)}></agm-map>`

通过Number()转换后，就能确保生成的属性值不带引号了。

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