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

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

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

html

ただマウスカーソルに黒いドットが付いてくるだけのシンプルなマウスストーカー

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 + 'のように+を左右につけなくてはならない理由がわかりません。

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