# string.join()

The `string.join()` function returns the string built from [`$elements`](#usdelements...) separated by [`$delimiter`](#usddelimiter) in original elements order.

{% code lineNumbers="true" %}

```scss
// Sass.
@use 'sass:list';
@use 'sass:string';

// The `string.join()` function.
@function join($delimiter, $elements...) {
  $string: '';
  @each $element in $elements {
    @if list.index(color list number string, type-of($element)) {
      @each $element in $element {
        $string: string.insert($string, #{$element}#{$delimiter or ''}, -1);
      }
    }
  }
  @return string.slice($string, 1, calc((string.length($delimiter) + 1) * -1));
}
```

{% endcode %}

{% embed url="<https://github.com/angular-package/sass/blob/main/string/_string.join.function.scss>" %}

### Parameters

#### **`$delimiter`**

The delimiter to add between [`$elements`](#usdelements...).

#### `$elements...`

Elements to join to returned string of `color`, `list`, `number` or `string` type with the [`$delimiter`](#usddelimiter).

### Return

The return value is a `string` built from [`$elements`](#usdelements...) with [`$delimiter`](#usddelimiter).

## Examples

```scss
// Use.
@use '@angular-package/sass/string';

// Examples.
@debug string.join('-');
@debug string.join('-', 'a', 'b', 'c'); // a-b-c
@debug string.join('-', '', 'a', 'b', 'c'); // -a-b-c
@debug string.join('-', 'a', 'b', 'c', ''); // a-b-c-
@debug string.join('-', '', 'a', 'b', 'c', ''); // a-b-c-
@debug string.join('-', 'a', ('b', 'c')); // a-b-c
@debug string.join('-', a, b, c); // a-b-c

// Join number.
@debug string.join('-', a, 1, b, 2, c, 3); // a-1-b-2-c-3

// Join color.
@debug string.join('-', silver, orange, green, red, blue, yellow); // silver-orange-green-red-blue-yellow

```