如何将字符串与变量连接起来?

IT技术 javascript
2021-01-29 13:33:37

所以我试图用一个字符串和一个传递的变量(这是一个数字)来制作一个字符串。我怎么做?

我有这样的事情:

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

那么如何将 'horseThumb' 和一个 id 放入一个字符串中?

我尝试了所有各种选项,我还用谷歌搜索,除了了解到我可以在这样的字符串中插入一个变量getElementById("horseThumb_{$id}")<-- (对我不起作用,我不知道为什么)我发现没有任何用处。所以任何帮助将不胜感激。

5个回答

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

自 ECMAScript 2015 起,您还可以使用模板文字(又名模板字符串)

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

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

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

每次调用该函数时都会打开弹出窗口,其值为 ,id返回值为document.getElementById如果您获得undefinedID 号弹出窗口,则您没有将参数传递给该函数。如果 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. 对于需要使用显式类型转换的情况
2021-04-04 13:33:37

在 JavaScript 中,“+”运算符用于添加数字或连接字符串。如果操作数之一是字符串“+”,则连接,如果它只是数字,则将它们相加。

例子:

1+2+3 == 6
"1"+2+3 == "123"
永远不要忘记运算符是从左到右计算的,所以: 1+2+'3'+4+5 // 3345
2021-03-18 13:33:37
或者,更好的是,结果:4+"5"-3?
2021-03-27 13:33:37
来不及回答但是...... 2 + "3" 将给出 "23"(通过连接)和 "23" - 5 会给你 18(减法解析为字符串)你可以在你的控制台中测试它......
2021-03-30 13:33:37
只是为了好玩,结果是什么:2 + "3" - 5(别作弊)
2021-04-05 13:33:37

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

例子:

var str = 'horseThumb_'+id;

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

function AddBorder(id){

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

}

就像你做的一样。对于这些愚蠢的事情,我会给你一个小技巧:只需使用浏览器 url 框来尝试 js 语法。例如,这样写:javascript:alert("test"+5)你就有了答案。您的代码中的问题可能是该元素在您的文档中不存在......也许它在表单或其他东西中。您也可以通过在 url: 中写入来测试这一点,javascript:alert(document.horseThumb_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,来自函数add 的var。

最好的祝福!