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


76

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

我有这样的事情:

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

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

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


9
就是您完成的方式。但是,如果您想变得明确,则可以更改idid.toString()
2010年

4
是的,您已正确完成。如果“不起作用”,则说明存在其他问题,例如实际上没有具有该ID的元素。
Ben Zotto

1
这段代码:getElementById("horseThumb_{$id}")不是JavaScript,而是PHP。这就是为什么它对您不起作用的原因。
多梅尼克(Domenic),2010年

1
您的语法正确,但是检查元素的大小写,请记住Javascript区分大小写。某些浏览器会让您发现不区分大小写的元素,但并非所有浏览器都能做到这一点
Sparky 2010年

1
@Cory永远不需要。id参数连接到一个字符串ergo,它将被强制转换为String类型。另一种情况是,如果您不知道另一个运算符的类型是什么-但是在这种情况下,它是字符串文字,因此不需要强制转换。
森那维达斯

Answers:


62

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

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

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。对于这种情况,需要使用显式类型转换
N0dGrand87 '17

32

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

例:

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

8
只是为了好玩,结果是2 + "3" - 5什么?(不作弊)

或者,甚至更好,结果:4+"5"-3
matsr

6
来不及回答,但是... 2 +“ 3”将给出“ 23”(通过串联),“ 23”-5将给出18(通过减法对字符串进行解析),可以在控制台中对其进行测试...
卡迪里

2
永远不要忘记对操作员进行从左到右的评估,因此:1+2+'3'+4+5 // 3345
JulienBérubé15年

4

发生这种情况的原因是,如果字符串与数字连接,则Java脚本有时会允许使用空格。尝试删除空格并创建一个字符串,然后将其传递给getElementById。

例:

var str = 'horseThumb_'+id;

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

function AddBorder(id){

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

}

1

就像你一样。而且,我将为您提供有关这些愚蠢的事情的小技巧:只需使用浏览器url框尝试js语法即可。例如,写下::javascript:alert("test"+5)您有答案。您的代码中的问题可能是该元素在您的文档中不存在……可能在表单之内。您也可以通过写url:javascript:alert(document.horseThumb_5)来测试它:检查错误在哪里。


0

使用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(来自add函数的var)串联的div id。

最好的祝福!

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.