join(), splite()

join()과 split() 메서드는 JavaScript에서 문자열과 배열을 조작하는 데 매우 유용한 도구입니다.

join()

join() 메서드는 배열의 모든 요소를 문자열로 결합합니다. 배열의 각 요소는 지정된 구분자로 구분됩니다.

const fruits = ['apple', 'banana', 'cherry'];
const result = fruits.join(', ');

console.log(result);  // "apple, banana, cherry"

 

• fruits 배열의 각 요소를 문자열로 결합하여 하나의 문자열을 만듭니다.
• 구분자로 ', ' (쉼표와 공백)을 사용하여 각 요소 사이에 삽입합니다.

split()

split() 메서드는 문자열을 지정된 구분자에 따라 여러 부분으로 나누어 배열로 반환합니다.

const str = 'apple, banana, cherry';
const result = str.split(', ');

console.log(result);  // ["apple", "banana", "cherry"]

 

 

• str 문자열을 ', ' (쉼표와 공백)을 구분자로 사용하여 나눕니다.
• 결과는 각 부분이 배열의 요소로 담긴 배열입니다.

추가 예제

const sentence = 'Hello world, welcome to JavaScript!';
const wordsArray = sentence.split(' '); // 공백으로 나눔
console.log(wordsArray); // ["Hello", "world,", "welcome", "to", "JavaScript!"]

const newSentence = wordsArray.join('-'); // 하이픈으로 결합
console.log(newSentence); // "Hello-world,-welcome-to-JavaScript!"

 

function Element( id, x, y, z, ry ) {
    const div = document.createElement( 'div' );
    div.style.width = '480px';
    div.style.height = '360px';
    div.style.backgroundColor = '#000';

    const iframe = document.createElement( 'iframe' );
    iframe.style.width = '480px';
    iframe.style.height = '360px';
    iframe.style.border = '0px';
    iframe.src = [ 'https://www.youtube.com/embed/', id, '?rel=0' ].join( '' );
    div.appendChild( iframe );

    const object = new CSS3DObject( div );
    object.position.set( x, y, z );
    object.rotation.y = ry;

    return object;

}
const group = new THREE.Group();
group.add( new Element( 'SJOz3qjfQXU', 0, 0, 240, 0 ) );
group.add( new Element( 'Y2-xZ-1HE-Q', 240, 0, 0, Math.PI / 2 ) );
group.add( new Element( 'IrydklNpcFI', 0, 0, - 240, Math.PI ) );
group.add( new Element( '9ubytEsCaS0', - 240, 0, 0, - Math.PI / 2 ) );
scene.add( group );

* 위 [...].join( '' )의 출력문 하나만 예를 들면, "https://www.youtube.com/embed/SJOz3qjfQXU?rel=0" 가 되며, "?rel=0" 을 넣는 이유는 동영상이 끝난 후 관련 동영상을 표시하지 않도록 설정합니다. 즉 유튜브 동영상 임베드 URL에 ?rel=0을 추가하면, 동영상이 끝난 후에 관련 동영상(recommendations)을 표시하지 않도록 설정합니다. 기본적으로 유튜브는 동영상이 끝나면 유튜브 알고리즘에 따라 관련 동영상들을 추천해서 자동으로 표시합니다. 그러나 ?rel=0을 설정하면, 해당 동영상의 같은 채널에서 업로드된 다른 동영상들만 표시됩니다.