how to trim/ slice the character if it reaches max length

am trying to add keep on text through checkbox to certain limit. assume am having max character to 30 (with space). then user should not go beyond 30. for that i write like below

(note: this question was already asked but not clearly)

clickCheck(appendVal, checked): void {
    if (checked) {   
        if( this.baseName.length > 30){
            this.baseName.substr(0, 30);
                } else {
                    this.locationName = this.locationName + '' + appendVal;
                    this.baseName = this.locationName + ":" + this.personName;    
            }
    }
}

<div class="displayInlineBlock  wdh100p">
    <input type="checkbox" value="this cannot be delivered in that location"  
    (change)="clickCheck($event.target.getAttribute('appendVal'), $event.target.checked)">
<label >add this text</label>
</div>

the value of checkbox ll reflect in immediate div. but its keep adding more than 30 when console the length thanks for jumping into this and many thanks for any help