js 特殊符号处理

Question

有一段js代码，类似于下面这样：

testString1='test';
testString2='test'+','+'test1 test2';
String = '<div style="cursor: pointer" onclick="test('+testString+')">'+'</div>'

当testString为testString1的时候onclick能够触发test（）function，但是当testString为testString2的时候就会报错“Uncaught SyntaxError: missing ) after argument list”。我到网上查说是特殊符号处理的问题，因为2里面有逗号和空格。请问要怎么处理这些特殊符号呢？最好不要是写死的代码，因为我testString2里面的内容其实是个变量，里面有很多东西，但大多含有空格。请问这种问题要怎么处理呢？
我试了下这样的写法：

String = '<div style="cursor: pointer" onclick="test('+testString1+","+testString1+')">'+'</div>'

这样能解决逗号的问题，但是空格的问题还是解决不了，怎么办呢？

Answer 1

当做一个字符串传进去 onclick="test(\''+testString+'\')"

Answer 2

test 如果是 string 的话，外面还需要用引号吧

Answer 3

你还是没理解外面用引号的意思。

string = '<div style="cursor: pointer" onclick="test(' + "\'" + testString2 + "\'" + ')"></div>

楼下的更好。。。

Answer 4

把字符串改成字符串数组：

function element(params) {
  return `<div style="cursor: pointer"
      onclick="test(${params.map(e=>`'${e}'`).join(',')})"></div>`
}


testString1 = ['test']
element(testString1)
testString2= ['test', 'test1 test2']
element(testString2)