配列の連結文字列を条件によって変えたい

Question

前提・実現したいこと

現在React、JSで実装しています。

配列の中身の値を「,」で連結するのですが、ある文字だけ「・」で連結したいです。
joinメソッドの使用をイメージしているのですが、うまく実装できますでしょうか？

例えば

var fruits = ["Banana", "Orange", "Apple", "Mango"];
var energy = fruits.join(' ,'); 
// 'Banana, Orange, Apple, Mango'

これを'Banana・Orange, Apple, Mango'
としたいです。

ただし、配列は固定数とは限らず、["Banana", "Apple", "Mango"]や["Orange", "Apple"]となることもあります

BananaとOrangeはセットです。どちらも存在するかどちらも存在しないです。
以下のようなパターンがありえます

Banana・Orange, Apple, Mango
Banana・Orange, Apple
Banana・Orange, Mango
Banana・Orange
Apple, Mango
他

試したこと

• join javascript condition　でググる

Comments

[maisumakun]

> ある文字だけ「・」で連結したいです。

条件はどのようなものでしょうか？「Bananaの後」なのか「Orangeの前」なのか、はたまた「1つ目だけ」なのかによって、やり方は違ってきます。

[k49977]

すみません、追記＆訂正します！

[k49977]

BananaとOrangeはセットで、表示／非表示されます。
なのでBanana Orangeだけ「Banana・Orange」としたいです

[BeatStar]

そのまま組むだけでは?

[k49977]

ただ配列には["Banana", "Orange", "Apple", "Mango"]とひとつひとつ分かれて入っているイメージです

Answer 1

joinしてからreplaceでどうでしょう？

const fruits = ["Banana", "Orange", "Apple", "Mango", "Banana", "Banana", "Orange", "Apple"];

const energy = fruits.join(', ').replace(/Banana, Orange/g, 'Banana・Orange')

console.log(energy); // => "Banana・Orange, Apple, Mango, Banana, Banana・Orange, Apple"

別案として、上記のような「いったんjoinしてからreplace」ではないやり方でやるとすれば、以下のようにreduceを使うとできます。

const fruits = ["Banana", "Orange", "Apple", "Mango", "Banana", "Banana", "Orange", "Apple"];

const energy = fruits.reduce((joinedFruits, fruit, i, ary) => {
  const delimiter = i > 0
    ? (ary[i-1] === 'Banana' && fruit === 'Orange' ? '・'　 : ', ' ) 
    : '';
  return `${joinedFruits}${delimiter}${fruit}`;
}, '');

console.log(energy); // => "Banana・Orange, Apple, Mango, Banana, Banana・Orange, Apple"

Comments

[k49977]

ご回答ありがとうございます！　
たしかにそれシンプルでいいですね！

Answer 2

今後の改修を見据えるなら、こんな感じでもいいかもしれません。

function f1(ar) {
    // Banana と Orange があったら "・" で連結して
    // ひとつの要素にして返却する処理
}

var fruits = ["Banana", "Orange", "Apple", "Mango"];
var energy = f1(fruits).join(' ,'); 

Comments

[k49977]

たしかに今後の改修にも対応しやすそうです！
ありがとうございます

[takasima20]

(･∀･)b

Answer 3

サンプルが少なすぎて場合分けができませんが
全部くっつけて特殊な場合だけ置き換えればよいのでは？

var fruits = ["Banana", "Orange", "Apple", "Mango"];
var energy = fruits.join(' ,').replace('Banana ,Orange','Banana・Orange');
console.log(energy);

Comments

[k49977]

ご回答いただきありがとうございます！シンプルで良い実装ですね！