如何将字符串与变量连接起来？答案

【问题标题】：How do I concatenate a string with a variable?如何将字符串与变量连接起来？
【发布时间】：2011-05-13 04:22:06
【问题描述】：

所以我试图用一个字符串和一个传递的变量（它是一个数字）来制作一个字符串。我该怎么做？

我有这样的事情：

function AddBorder(id){
    document.getElementById('horseThumb_'+id).className='hand positionLeft'
}

那么如何将“horseThumb”和一个 id 放入一个字符串中？

我尝试了所有不同的选项，我还搜索了谷歌，除了得知我可以在字符串中插入一个变量，像这样getElementById("horseThumb_{$id}")

【问题讨论】：

正如您所做的那样。但是如果你想明确一点，你可以把id改成id.toString()。
是的，你做得对。如果它“不起作用”，则说明其他问题，例如实际上没有具有该 ID 的元素。
这段代码：getElementById("horseThumb_{$id}") 不是 JavaScript，而是 PHP。所以这就是为什么它对你不起作用。
您的语法是正确的，但是请检查元素的大小写，记住 Javascript 是区分大小写的。有些浏览器会让你找到不区分大小写的元素，但并非所有浏览器都这样做
@Cory 永远不需要。 id 参数连接到一个字符串，ergo，它将被强制转换为 String 类型。另一种情况是，如果您不知道另一个运算符的类型是什么 - 但在这种情况下它是 s 字符串文字，因此不需要强制转换。

标签： javascript

【解决方案1】：

就像你做的那样。对于这些愚蠢的事情，我会给你一个小提示：只需使用浏览器 url 框尝试 js 语法。例如，写下这个：javascript:alert("test"+5)，你就有答案了。您的代码中的问题可能是您的文档中不存在此元素......也许它在表单或其他东西中。您也可以通过在 url 中写入：javascript:alert(document.horseThumb_5) 来检查您的错误在哪里。

【讨论】：

【解决方案2】：

在 javascript 中，“+”运算符用于添加数字或连接字符串。如果其中一个操作数是字符串“+”连接，如果它只是数字，则添加它们。

示例：

1+2+3 == 6
"1"+2+3 == "123"

【讨论】：

只是为了好玩：2 + "3" - 5 的结果是什么？（不作弊）
或者，更好的结果是：4+"5"-3?
回答太晚了，但是 ... 2 + "3" 将给出 "23"（通过连接），而 "23" - 5 将给出 18（减法解析为字符串）你可以在你的控制台中测试它......
永远不要忘记运算符是从左到右计算的，所以：1+2+'3'+4+5 // 3345

【解决方案3】：

您的代码是正确的。也许您的问题是您没有将 ID 传递给 AddBorder 函数，或者具有该 ID 的元素不存在。或者您可能在通过浏览器的 DOM 访问相关元素之前运行您的函数。

自 ECMAScript 2015 起，您也可以使用template literals (aka template strings)：

document.getElementById(`horseThumb_${id}`).className = "hand positionLeft";

要识别第一种情况或确定第二种情况的原因，请将这些作为函数内的第一行添加：

alert('ID number: ' + id);
alert('Return value of gEBI: ' + document.getElementById('horseThumb_' + id));

这将在每次调用该函数时打开弹出窗口，其值为id，返回值为document.getElementById。如果你得到undefined 作为 ID 号弹出窗口，你没有将参数传递给函数。如果 ID 不存在，您将在第一个弹出窗口中获得您的（不正确？）ID 号，但在第二个弹出窗口中获得 null。

如果您的网页看起来像这样，尝试在页面仍在加载时运行AddBorder，则会发生第三种情况：

<head>
<title>My Web Page</title>
<script>
    function AddBorder(id) {
        ...
    }
    AddBorder(42);    // Won't work; the page hasn't completely loaded yet!
</script>
</head>

要解决此问题，请将所有使用 AddBorder 的代码放入 onload 事件处理程序中：

// Can only have one of these per page
window.onload = function() {
    ...
    AddBorder(42);
    ...
} 

// Or can have any number of these on a page
function doWhatever() {
   ...
   AddBorder(42);
   ...
}

if(window.addEventListener) window.addEventListener('load', doWhatever, false);
else window.attachEvent('onload', doWhatever);

【讨论】：

它不适用于某些嵌入式 JavaScript 引擎 - 例如 mJS - 会导致类似 MJS callback error: implicit type conversion is prohibited 的错误。对于需要使用显式类型转换的情况

【解决方案4】：

这可能会发生，因为如果字符串与数字连接，java 脚本有时会允许空格。尝试删除空格并创建一个字符串，然后将其传递给 getElementById。

示例：

var str = 'horseThumb_'+id;

str = str.replace(/^\s+|\s+$/g,"");

function AddBorder(id){

    document.getElementById(str).className='hand positionLeft'

}

【讨论】：

【解决方案5】：

另一种使用 jquery 更简单的方法。

样本：

function add(product_id){

    // the code to add the product
    //updating the div, here I just change the text inside the div. 
    //You can do anything with jquery, like change style, border etc.
    $("#added_"+product_id).html('the product was added to list');

}

其中 product_id 是 javascript var，$("#added_"+product_id) 是与 product_id 连接的 div id，product_id 是函数 add 的 var。

最好的问候！

【讨论】：