在前端开发中，我们经常需要在 HTML 元素的 onclick 事件中传递参数。本文将介绍如何在 onclick 函数中传递字符串参数。
方法一：使用匿名函数
在 onclick 函数中使用匿名函数可以轻松地传递字符串参数。以下是示例代码：
<button onclick="((str) => {console.log(str);})('Hello, world!')">点击我</button>在上面的代码中，我们通过一个匿名函数将字符串参数 "Hello, world!" 传递给 console.log 函数。
方法二：使用函数绑定
除使用匿名函数外，我们还可以使用函数绑定来传递字符串参数。以下是示例代码：
<button id="myButton">点击我</button>
<script>
function handleClick(str) {
console.log(str);
}
document.getElementById('myButton').onclick = handleClick.bind(null, 'Hello, world!');
</script>在上面的代码中，我们定义了一个 handleClick 函数并将其绑定到了 myButton 的 onclick 事件上。通过 bind 方法，我们将字符串参数 "Hello, world!" 绑定到了 handleClick 函数中。
方法三：使用 data-* 属性
另外一种传递字符串参数的方法是使用 data-* 属性。以下是示例代码：
<button id="myButton" data-str="Hello, world!">点击我</button>
<script>
document.getElementById('myButton').onclick = function() {
console.log(this.dataset.str);
};
</script>在上面的代码中，我们将字符串参数 "Hello, world!" 存储在了 myButton 元素的 data-str 属性中。通过 this.dataset.str，我们可以在 onclick 函数中获取该属性的值。
总结
以上是在 onclick 函数中传递字符串参数的三种方法。使用匿名函数和函数绑定比较常用，而使用 data-* 属性则更为灵活。在实际开发中，根据需要选择合适的方法来传递参数，可以提高代码的可读性和可维护性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/9653
