变量变成另一个变量变得“未定义”答案

【问题标题】：Variable into another variable getting “undefined”变量变成另一个变量变得“未定义”
【发布时间】：2015-05-24 03:54:09
【问题描述】：

在这段代码中，变量“link”给出了“undefined”。我不知道是什么原因。这是我的代码：

HTML，第一次尝试：

<html>
    <head>
                <meta charset="utf-8" />
        <script src="js.js"></script>
        <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
    </head>
    <body>
        <p><a onclick="doSom()">Click here!</a></p>
    </body>
</html>

JavaScript (w/jQuery)，第一次尝试：

var link;
var testing="Testing this <a href=\""+link+"\">variable</a> here.";
function doSom(){
    link="http://www.google.com";
    $('p').html(testing);
}

HTML，第二次尝试：

<html>
    <head>
        <meta charset="utf-8" />
        <script src="js.js"></script>
        <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
    </head>
    <body>
        <p><a onclick="doSom('www.google.com.br')">Click here!</a></p>
    </body>
</html>

JavaScript (w/jQuery)，第二次尝试：

var link;
var testando="Testing this <a href=\""+link+"\">variable</a> here.";
function doSom(link){
    $('p').html(testing);
}

变量“link”在上面的代码中没有给出它的值，保持“未定义”。

这是有效的初始代码（但我正在优化它）：

第一次尝试的 HTML；

JavaScript（带 jQuery）：

var link;
var testingi="Testing this <a href='";
var testingii="'>variable</a> here.";
function doSom(link){
    $('p').html(testingi+link+testingii);
}

我认为完全没有必要只为一句话声明2个变量。

【问题讨论】：

标签： javascript jquery variables scope undefined

【解决方案1】：

您在链接具有值之前添加链接，因此未定义。之后定义字符串。

看这里：

var link;
 ----  this is empty at definition !!! var testing="Testing this <a href=\""+link+"\">variable</a> here.";
 function doSom(){
 link="http://www.google.com";
$('p').html(testing);
}

这样做：

var link;
var testing;
function doSom(){
link="http://www.google.com";
testing ="Testing this <a href=\""+link+"\">variable</a> here.";
$('p').html(testing);
}

【讨论】：

【解决方案2】：

您的问题归结为您在初始化之前尝试使用 link 变量。

var link; // By default, this is `undefined`
var testing="Testing this <a href=\""+link+"\">variable</a> here.";
// Your `testing` link will now contain the string `undefined`
function doSom(){
    link="http://www.google.com";
    // Since you don't update `testing` it still has "undefined" in it somewhere
    $('p').html(testing);
}

解决方案：等到初始化 link 变量之后再构建 testing 链接。

【讨论】：

我是多么愚蠢。但是看，我的变量“测试”有大量代码，这就是我试图缩短它的原因。有代码可以更新变量而不必重新编写？
ES6 模板字符串会让它更简洁（但 IE 不支持它们） - `Testing this <a href="${link}">variable</a> here.`
IE 没有问题，我正在显示更改浏览器的消息。 :P 谢谢，伙计。结束了整整一个月的疑惑。

【解决方案3】：

对于您的代码“tentativa 1”，未定义链接的原因是您在为链接分配值之前将其插入到字符串测试中。

改变

var link;
var testing="Testing this <a href=\""+link+"\">variable</a> here.";
function doSom(){
    link="http://www.google.com";
    $('p').html(testing);
}

到

var link;
function doSom(){
    link="http://www.google.com";
var testing="Testing this <a href=\""+link+"\">variable</a> here.";
    $('p').html(testing);
}

它会起作用的。

与“第二次尝试”相同。移动您的字符串定义进行测试（并将其重命名为正确），它应该可以正常工作。

我猜“JavaScript (w/jQuery):”可以正常工作。

您是对的，但是您不需要定义这些变量。这不是它在最后一个示例中正常工作的原因。这是因为您在定义后引用了“链接”。

一种更好的方法（避免定义无用的变量并在定义后引用“链接”）是将您的 html 分配更改为如下所示：

    link="http://www.google.com";
    $('p').html("Testing this <a href=\""+link+"\">variable</a> here.");

您的主要收获应该是，将变量放入字符串不会保持对变量的引用。包含在字符串中的变量的值是最终的。在为它赋值之前，您不能将它包含在最终的字符串赋值中。

【讨论】：