如何在 Javascript 上正确获取我的 url 参数？

Question

我正在尝试将 giphy url 解析为 javascript 参数，它删除了我所有的 //.

这是我的js：

var $save = $("<input type=\"button\" class=\"btn btn-sm btn-success\" value=\"Save\" onclick=\"SaveGif(\"" + gif.fixed_height.url +"\")\" />");

网址是：

https://media1.giphy.com/media/tJqyalvo9ahykfykAj/200.gif?cid=487fb615lw0p7lcstn5iqghh0mxvk4n889nope6ven1n897i&rid=200.gif

这就是 Chrome 解析的内容：

<input type="button" class="btn btn-sm btn-success" value="Save" onclick="SaveGif(" https:="" media1.giphy.com="" media="" tjqyalvo9ahykfykaj="" 200.gif?cid="487fb615lw0p7lcstn5iqghh0mxvk4n889nope6ven1n897i&amp;rid=200.gif&quot;)&quot;">

此外，如果我删除引号，我会得到正确的网址，但没有“”：

<input type="button" class="btn btn-sm btn-success" value="Save" onclick="SaveGif(https://media1.giphy.com/media/tJqyalvo9ahykfykAj/200.gif?cid=487fb615lw0p7lcstn5iqghh0mxvk4n889nope6ven1n897i&amp;rid=200.gif)">

我做错了什么？

谢谢！

Answer 1

使用单引号

var $save = $("<input type=\"button\" class=\"btn btn-sm btn-success\" value=\"Save\" onclick=\"SaveGif('" + gif.fixed_height.url + "')\" />");

Answer 2

将所有内容包裹在 ` 反引号中 它允许您自由使用 " " 所以它会是这样的

var $save = $(`<input type="button" class="btn btn-sm btn-success" value="Save" onclick=SaveGif( + gif.fixed_height.url +/>`);

Answer 3

如果您使用单引号打开和关闭所有 html 字符串，则不需要转义任何属性双引号，这使得读取和写入变得更加容易

然后，而不是搞乱内联onclick只需添加一个 jQuery 事件侦听器，该侦听器使用传入的适当变量调用您的函数

 var $save = $('<input type="button" class="btn btn-sm btn-success" value="Save" />'); $save.on('click', function(evt) { SaveGif(gif.fixed_height.url) }); // demo code only below const gif = {fixed_height: {url: 'https://media1.giphy.com/media/tJqyalvo9ahykfykAj/200.gif?cid=487fb615lw0p7lcstn5iqghh0mxvk4n889nope6ven1n897i&rid=200.gif'}}; $('body').append($save) function SaveGif(url) { console.log(url) }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>