要素の間に反映したい区切り（カンマ）を最後の要素には反映させない

Question

ワードプレス内のJavaScript, jQuery記述についてお尋ねします。
###やりたいこと
ワードプレスの個別ページにて以下の画像のようにカテゴリー区分を表示させているのですが、最終的には横並びにして「，（カンマ）」で区切りたいと思っています。

###試したこと
以下が該当部分の表記で、コメントアウト部分を書き換えました。カンマで区切ることはできたのですが、最後の要素（この場合はSketch）にもカンマが表示されてしまいまぬけになりました。

<?php if ( count( $categories_names ) ) { ?>
  <div class="portfolio-meta-list-item">
    <strong><?php echo esc_html( $option['project_categories_text'] ); ?></strong>
    <p>
      <?php
        if ( $support_archive ) {
          //以下の部分は触っても変化がなかったので放置しているのですが、触るべきでしょうか？
          $skills = get_the_term_list( $id, 'portfolio_cat', '', '<br>', '' );
          echo $skills;
        } else {
          foreach ( $categories_names as $name ) {
            //echo esc_html( $name ) . '<br>'; この部分を以下に書き換えました
            echo esc_html( $name ) . ', ';
            //ここに何かしらの記述を追加するのかと思っています。
          }
        }
      ?>
    </p>
  </div>
<?php } ?>

###求めている答え
上記を踏まえ、最後の要素（この場合はSketch）には echo esc_html( $name ) . ', '; を反映しない記述のしかたを教えていただきたいです。最後の要素のうんぬんについて調べはしたのですが、それらの記述を現状の物にどう落とし込めばいいのかが分からずにこちらに質問させていただきました次第です。
初歩的な質問で大変恐縮ですが、記述の仕方についてご教授のほどよろしくお願い致します。

###追加

Comments

[kyoya0819]

なんでもなかったです。

[m.ts10806]

「初心者アイコン」を利用し、タイトルや本文からは除いてください

[crigw]

使い方をわかっておらず申し訳ございませんでした。

[m.ts10806]

確固たるルールがあるわけではないですが、質問タイトル、本文は要件のみのほうが回答者としては読みやすくなるのです。
(厳密に言うと冒頭の挨拶とか締めの「よろしくお願いします」すらもないほうが良い)

Answer 1

foreach ( $categories_names as $name ) {

$categories_namesをarray_mapしてesc_html()をかました上で
implode()してください

sample

$categories=["test1","test2","test3"];
print implode(",",array_map(function($x){return "_".$x."_";},$categories));

Comments

[crigw]

すみません、もう少し砕いてご教示いただけますでしょうか…！

[yambejp]

わかりにくかったですか、すみません。
まず質問が中途半端です
・$categoriesに配列で文字列がはいっている
・一つずつ取り出して一部編集して表示したい
・それぞれの表示の間にカンマをいれたい

ということで間違いないですか？

その処理がまず。
・array_mapをつかって$categoriesのすべてのデータに処理をかける
・それをカンマ区切りにするためにimplodeで合体させる

の２つの処理しかしていません。
どこかわからないところがあれば具体的に課題を指摘ください

[crigw]

完全初心者のために何がわかっていないのかもわかっておらず、いろいろ説明が不足しており申し訳ございません。
カテゴリーは投稿画面でカテゴリー欄内の項目にチェックを入れて表示させてます。カテゴリー項目は全部で4つあり、チェックしたものだけ表示されてますので、そのそれぞれの表示の間にカンマを入れたい、と言うことであっています。
$categories=["test1","test2","test3","test4"];　
の場合、チェックされていないものがある場合はどうなるのでしょうか？エラーとか起きたりしないでしょうか？その辺もわかっていないのですみません。

[yambejp]

> チェックされていないものがある場合

もとのソースをみても単純に$categoriesをforeachしているだけなので
「チェック」的な処理が判断できません
チェックとは何かを明確にしてもらえば回答できるかもしれません

[crigw]

すみません、上手な説明ができないので画像を追加しました。投稿画面のこの部分のチェックのことです。

[yambejp]

カテゴリーはチェックボックスで表示するのですね？
チェックしたものだけをカンマ区切りでどこかに表示するのでしょうか？
どのタイミングでどこに表示すればいいのですか？
（チェックのつけ外しするたびにjsでどこかに表示する感じ？）

[crigw]

チェックしたものだけをカンマで区切って、最後の要素だけカンマをつけないようにしたいです。ページを更新して表示するタイミングでカンマが表示させたいです。現時点、カンマを表示させるところまではできているので、あとは最後の要素にそれを付けないという処理を付け加えるだけです。以下参考ページですが、こちらのCategory部分にやりたい実装です。https://abileweb.com/minimal-portfolio/portfolio/nature-of-girl/

[yambejp]

> 現時点、カンマを表示させるところまではできている

その部分がこの部分↓↓↓なんですよね？
foreach ( $categories_names as $name ) {
echo esc_html( $name ) . ', ';
}

その部分を
echo implode(",",array_map(function($name){return esc_html($name)},$categories_names));
と書き換えてください

[crigw]

です、その部分です。ご教示ありがとうございます！
ただ反映したところ
エラー： syntax error, unexpected "}"
が生じて、項目まるっと表示しまいました…

[yambejp]

失礼、セミコロンがぬけてました
echo implode(",",array_map(function($name){return esc_html($name);},$categories_names));

[crigw]

ありがとうございました！
無事に最後の要素にはカンマが付かなくなりました！。。。が、なぜか
テスト1,テスト2テスト1,テスト2
といった感じで2回表示されます…、あとカンマのあとに半角スペースを入れたいときは
echo implode(","... の ,の後にスペースをいれたらいいでしょうか？

[yambejp]

> 2回表示されます

foreachの中でやってませんか？
この方法ならforeach自体が不要です。

>カンマのあとに半角スペース

","→", "でいけると思います

[crigw]

おっしゃられる通りforeach内に記載してました、すみません！
最後まで丁寧にご説明いただきありがとうございました！