Javascriptの文法上の構造がわからない（マウスストーカー）

Question

https://monoqlo.tokyo/lifehack/program/javascript/13153/

こちらのサイトに記載のある構文でわからないところがあります。

html

<div id="stalker"></div> <h1> ただマウスカーソルに黒いドットが付いてくるだけのシンプルなマウスストーカー </h1>

css
#stalker {
pointer-events: none;
position: fixed;
top: -8px; //座標調節（カーソル位置と円の中心を合わせる）
left: -8px; //座標調節（カーソル位置と円の中心を合わせる）
width: 16px; //マウスストーカーの直径
height: 16px; //マウスストーカーの直径
background: rgba(0,0,0,0.5);
border-radius: 50%;
transform: translate(0,0);
transition: transform 0.2s; //ちょっと遅れてついてくるように
transition-timing-function: ease-out;
z-index: 999;
}

js
//マウスストーカー用のdivを取得
const stalker = document.getElementById('stalker');

//上記のdivタグをマウスに追従させる処理
document.addEventListener('mousemove', function (e) {
stalker.style.transform = 'translate(' + e.clientX + 'px, ' + e.clientY + 'px)';
});

こちらの、stalker.style.transform = 'translate(' + e.clientX + 'px, ' + e.clientY + 'px)'
この部分が読解できません。
style.transformでcssを動かそうというのだろうと主追いますが、' + e.clientX + 'のように+を左右につけなくてはならない理由がわかりません。

どなたか文法をご教示いただけませんでしょうか。

Comments

[takane]

( e.clientX + px, e.clientY + px)
これではいけないのでしょうか。

[javahack]

既に回答があるように、変数の値と文字列を連結するために「+」が使われています。文字列は「'(シングルクォーテーション)」で囲まれた箇所です。

Answer 1

シングルクオーテーションの対応を見誤ってるだけです。
「'translate('」 + 「e.clientX」 + 「'px, '」 + 「e.clientY」 + 「'px)'」
の連結です。

Answer 2

stalker.style.transformに代入しているのは文字列で、e.clientXとe.clientYの部分は文字列ではなくその変数の数値にしてほしいので文字列結合しています。

Answer 3

どちらとも詳しい解説ありがとうございました！
文字列結合で変数扱いにしているのですね・・。